我想实现的目标：JSFiddle
<div id="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
</div>
我想拥有的是，当放置更多的“盒”类时，“盒”类的“ X”数量合适，并使“内容”类更宽。
在Internet Explorer（11）中，您看到“ box”类适合“ content”类并展开，但是在Chrome（41）中，“ box”类似乎浮在“ content”类之上，而在“ content”之外班级宽度。这很烦人，因为如果我要在其旁边放置另一个“内容”类，它将与第一个类重叠。
谁能解释我在做什么错？如果是Chrome故障，有没有建议在没有Flexbox的情况下完成此操作？
首先，我建议您不要float: left;与混合使用display: flex;。考虑display: inline-flex;改为指定。
也就是说，恐怕您需要做一些计算，才能找到container元素内所有子项中最大的偏移量（包括边距）：
以下代码需要jQuery，并应在DOM准备就绪时运行：
// -----------------------------------------------------------------------------
// Find the biggest offset right among all children, relatively to the container
// -----------------------------------------------------------------------------
var maxOffsetRight = 0,
currentOffsetRight;
$('#container').children().each(function() {
currentOffsetRight = $(this).position().left + $(this).outerWidth(true);
if (currentOffsetRight > maxOffsetRight) {
maxOffsetRight = currentOffsetRight;
}
});
// Set the width of the container
var offsetLeft = $('#container').position().left;
$('#container').css('width', maxOffsetRight - offsetLeft);
见小提琴
注意：您可能会想到一种算法，该算法寻找最后一个子项的偏移量。这在大多数情况下都可以使用，但可能会失败，而且您可以order在flex项目上设置属性以对其进行重新排序。因此，DOM中的最后一个子对象不一定是具有最大右偏移量的子对象。如果子级具有任意宽度，则在不重新排序元素的情况下也可能会失败。例如，如果同一列中最后一个孩子之前的孩子大于最后一个孩子。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句