将浮动子 DIV 置于具有流体宽度的父 DIV 中

我有以下 HTML：

<div id="parent">
     <div class="child">Box1</div>
     <div class="child">Box2</div>
     <div class="child">Box3</div>
     <div class="child">Box4</div>
     <div class="child">Box5</div>
     <div class="child">Box6</div>
     <div class="child">Box7</div>
     <div class="child">Box8</div>
     <div class="child">Box9</div>
     <div class="child">Box10</div>
</div>

以及以下 CSS：

#parent {
   display: inline-block;
   max-width: 1000px;
   height: 500px;
   border: 1px solid #000000;
   text-align: center;
}
.child {
   width: 100px;
   height: 100px;
   border: 1px solid #000000;
   margin: 10px;
   float: left;
}

我想让子 DIV 向左浮动，同时将它们置于没有固定宽度的父 DIV 中心。

我不想对子 DIV 使用 display: inline-block 的原因是，如果一行只有 1 或 2 个框，它们将居中，并且我希望它们与上一个框向左对齐行。

第二个原因是使用ajax将加载更多数据。因此，如果最后一行只有 1 或 2 个框，但仍然可以容纳更多框，它们将被插入到新行中，而不是附加到最后一行。我不确定这一点，但我认为使用显示内联块时会发生什么。相反，Float 没有这种行为。

忘记提及父级应该是 display: inline-block 因为另一个框将在它旁边对齐。

我创建了一个小提琴供你玩：http://jsfiddle.net/6a2eqpmu/ http://jsfiddle.net/6a2eqpmu/

不幸的是你无法使用纯 CSS 来做到这一点。如果您愿意使用一点 javascript 和 jQuery，您可以轻松实现您想要的：

var parent = $('#parent'),
    container = $('#container'),
    children = container.children('.child'),
    width = children.eq(0).outerWidth() + parseInt(children.eq(0).css('margin-left')) + parseInt(children.eq(0).css('margin-right')),
    maxWidth = children.length * width;

function resizeContainer() {
    var newWidth = Math.floor(parent.width() / width) * width;
    if (newWidth <= maxWidth && newWidth > 0) {
        container.width(newWidth);
    }
}

$(window).resize(resizeContainer);

resizeContainer();

Example http://jsfiddle.net/6a2eqpmu/18/