![](/img/trans.png)
[英]How do I make a container div only overflow horizontally without using “display:inline-block” for its inner divs?
[英]Why do these inline-block divs not fit inside their container?
這個小提琴是這個問題的結果。 在其中,我有一個3 div flexbox和一個4 div flexbox。 (目前,它與Angular無關)
理想情況下,flex div可以放入其容器中,但是即使它們總體上比其容器窄,它們也不適合(將一個div推出)。 更令人困惑的是,它們的價格差異很大。
當有4個div時,這4個元素的寬度之和為814px,而容器的寬度為819px。 如果我將最寬的div的寬度縮小9個像素(使總寬度為804),則它們都將按預期放入其容器中。
#hbox1: width is 819, inner is 819, outer is 821
0 Object {borderWidth: 0, marginWidth: 0, paddingWidth: 0, flex: 1,
1 Object {borderWidth: 2, marginWidth: 0, paddingWidth: 0, flex: 2,
2 Object {borderWidth: 0, marginWidth: 0, paddingWidth: 0, flex: 1,
3 Object {borderWidth: 0, marginWidth: 0, paddingWidth: 0, flex: 1,
#hbox1 finalFlexTotal is 814
當有3個div時,我必須將最寬的div的寬度縮小6個像素,以使其全部適合其容器。
#hbox2: width is 819, inner is 819, outer is 821
0 Object {borderWidth: 0, marginWidth: 0, paddingWidth: 0, flex: 1,
1 Object {borderWidth: 2, marginWidth: 0, paddingWidth: 0, flex: 2,
2 Object {borderWidth: 0, marginWidth: 0, paddingWidth: 0, flex: 1,
#hbox2 finalFlexTotal is 815
我已經考慮了borderWidth,marginWidth和paddingWidth為0。為什么在沒有某種隨機調整的情況下div不能適合其容器?
如果小提琴消失了,下面是代碼和html:
<html>
<body>
<div id="hbox1" style="border: 1px solid red">
<div flex=1 style="display:inline-block;height:100%">This is the A Box</div>
<div flex=2 style="border:1px solid black;display:inline-block;height:100%">This is the B Box</div>
<div flex=1 style="display:inline-block;height:100%">This is the C Box</div>
<div flex=1 style="display:inline-block;height:100%">This is the D Box</div>
</div>
<div id="hbox2" style="border: 1px solid red;margin-top:40px">
<div flex=1 style="display:inline-block;height:100%">This is the A Box</div>
<div flex=2 style="border:1px solid black;display:inline-block;height:100%">This is the B Box</div>
<div flex=1 style="display:inline-block;height:100%">This is the C Box</div>
</div><script type="text/javascript" src="jquery-1.10.2.js" />
<script type="text/javascript">
function flexBoxIt(selector) {
var $node,
index,
flexValue,
flexInfo = [],
totalFlex = 0,
finalFlexTotal = 0;
$(selector).children('div').each(function (index) {
$node = $(this);
flexValue = $node.attr("flex");
flexValue = flexValue ? parseInt(flexValue, 10) : 1,
flexInfo[index] = {
"borderWidth": parseInt($node.css('borderLeftWidth'), 10) + parseInt($node.css('borderRightWidth'), 10),
"marginWidth": parseInt($node.css('marginLeft'), 10) + parseInt($node.css('marginRight'), 10),
"paddingWidth": parseInt($node.css('paddingLeft'), 10) + parseInt($node.css('paddingRight'), 10),
"flex": flexValue,
"$jq": $node
};
totalFlex += flexValue;
});
width = $(selector).width();
console.log("%s: width is %d, inner is %d, outer is %d", selector, width, $(selector).innerWidth(), $(selector).outerWidth(true));
for (index in flexInfo) {
node = flexInfo[index];
node.width = Math.floor(width * node.flex / totalFlex - node.borderWidth);
finalFlexTotal += node.width;
console.log(index, node);
node.$jq.css("width", node.width + "px");
}
console.log("%s finalFlexTotal is %d", selector, finalFlexTotal);
}
flexBoxIt("#hbox1");
flexBoxIt("#hbox2");
</script>
</body>
</html>
元素之間的空間會導致額外的寬度。 您需要將所有元素放在一行上,如下所示:
<div flex=1 style="...">This is the A Bo</div><div ...>This is the B Box</div>...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.