为什么这些内嵌块div不适合他们的容器？ [英] Why do these inline-block divs not fit inside their container?

问题描述

此小提琴是这种question 。在其中，我有一个3 div flexbox和一个4 div flexbox。 （在这一刻，它与Angular无关）

理想情况下，flex div将适合他们的容器，但即使它们集体比容器窄，他们不适合（一个div被推出）。更令人困惑的是，它们被不同的数量所限制。

当有4个div时，4的宽度总和为814px，而容器为819px宽。如果我将最宽的div的宽度缩小了9个像素，使总宽度为804，则它们都符合预期的容器。

 ＃hbox1：width为819，inner为819，outer为821 
 0 Object {borderWidth：0，marginWidth：0，paddingWidth：0，flex：1，
 1 Object {borderWidth： marginWidth：0，paddingWidth：0，flex：2，
 2 Object {borderWidth：0，marginWidth：0，paddingWidth：0，flex：1，
 3 Object {borderWidth：0，marginWidth： paddingWidth：0，flex：1，
＃hbox1 finalFlexTotal为814 
  

当有3 divs，我必须将最宽的div的宽度缩小6个像素，使它们都适合他们的容器。

 ＃hbox2 ：width为819，inner为819，outer为821 
 0 Object {borderWidth：0，marginWidth：0，paddingWidth：0，flex：1，
 1 Object {borderWidth：2，marginWidth： paddingWidth：0，flex：2，
 2 Object {borderWidth：0，marginWidth：0，paddingWidth：0，flex：1，
＃hbox2 finalF我已经占据了borderWidth，marginWidth和paddingWidth为0.为什么不是这个div适合他们的容器，没有任何随机的调整？
 
 
 
这里是代码和html，如果小提琴消失了：
 < html> 
< body> 
< div id =hbox1style =border：1px solid red> 
< div flex = 1 style =display：inline-block; height：100％>这是A Box< / div> 
< div flex = 2 style =border：1px solid black; display：inline-block; height：100％>这是B Box< / div> 
< div flex = 1 style =display：inline-block; height：100％>这是C Box< / div> 
< div flex = 1 style =display：inline-block; height：100％>这是D Box< / div> 
< / div> 
< div id =hbox2style =border：1px solid red; margin-top：40px> 
< div flex = 1 style =display：inline-block; height：100％>这是A Box< / div> 
< div flex = 2 style =border：1px solid black; display：inline-block; height：100％>这是B Box< / div> 
< div flex = 1 style =display：inline-block; height：100％>这是C Box< / div> 
< / div>< script type =text / javascriptsrc =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' ），$ 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 =... >这是A Bo< / div>< div ...>这是B Box< / div> ... 
  
 
This fiddle is a result of this question.  In it, I have a 3 div flexbox and a 4 div flexbox.  (At this moment, it has nothing to do with Angular)

Ideally the flex divs would fit inside their container, but even though they are collectively narrower than their container, they don't fit (one div is pushed out).  More confusing is that they are off by different amounts.

When there are 4 divs, the sum of the widths of the 4 is 814px, while the container is 819px wide.  If I shrink the width of the widest div by 9 pixels, making the total width 804, they all fit within their container as expected.
#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
When there are 3 divs, I have to shrink the width of the widest div by 6 pixels to make them all fit in their container.
#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 
I've accounted for borderWidth, and marginWidth and paddingWidth are 0.  Why don't the div's fit in their container without some kind of random adjustment?

Here is the code and html in case the fiddle goes away:
<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>

解决方案
The space between the elements cause extra width. You need to put all your elements on one line, like this:
<div flex=1 style="...">This is the A Bo</div><div ...>This is the B Box</div>...


                        
这篇关于为什么这些内嵌块div不适合他们的容器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！