[英]Constraing minimum height and width of outer div to the size of inner div
I have a div within a div. 我在div内有一个div。
The outer div is draggable(jQuery) and the inner div is resizable(jQuery). 外部div是可拖动的(jQuery),内部div是可调整大小的(jQuery)。
The inner div has a span within it which is filled with text. 内部div中有一个跨度,其中填充了文本。
How can I make the outer div height and width never be any smaller than the height and width of its contents? 如何使外部div的高度和宽度永远不小于其内容的高度和宽度?
Currently I can resize the outer div to be smaller and this is a problem when the outer div has a border as the text overflows out of the outer div. 目前,我可以将外部div调整为较小的尺寸,当文本从外部div溢出时外部div带有边框时,这是一个问题。
thanks for your help in advance 谢谢你的帮助
Try this, WithIn the resize event, 1) Get the width of the inner div. 尝试使用WithIn调整大小事件,1)获取内部div的宽度。 And, 2) Apply min-width of outer div as (innerdiv + 4) .. 并且,2)将外部div的最小宽度应用为(innerdiv + 4)..
so, whenever you resize, resize event will trigger, so, you need to get innerdiv width and set its outerdiv "min-width" slightly higher than innerdiv.. 因此,每当您调整大小时,都会触发resize事件,因此,您需要获取innerdiv宽度并将其externaldiv的“最小宽度”设置为略高于innerdiv。
Hope this helps.. 希望这可以帮助..
.bind('resize', function(){
var outer_width = parseInt($('.innerdiv').width() + 4);
$('.outerwidth').width(outer_width);
});
给出永远不会变小的div的min-height和min-width。要确切的答案,您可以发布完整的html代码。
Apply some max-height
and max-width
to the inner div. 将一些max-height
和max-width
应用于内部div。
If your outer div has 300px height and 300px width: 如果您的外部div高度为300px,宽度为300px:
inner div css 内部div CSS
max-height:300px;
max-width:300px;
If you're actually using the jQuery UI Resizable plugin you can use its own option parameters : 如果您实际使用的是jQuery UI Resizable插件,则可以使用其自己的option参数 :
$('.wrapper').resizable({
minHeight: function() {
$(this).contents().height();
}
,minWidth: function() {
$(this).contents().width();
}
});
using a bit from each of your answers, this is how I solved it. 使用每个答案中的一点,这就是我解决的方法。
var spanminwidth=$('#span'+i).width();
spanminwidth=+spanminwidth+4;
$("#div"+i).css('min-width',spanminwidth);
var spanminheight=$('#span'+i).height();
spanminheight=+spanminheight+4;
$("#div"+i).css('min-height',spanminheight);
thanks for all the help 感谢所有的帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.