css - 均匀分布的网格动态内容

Question

我要有一个 <div> 的网格是动态生成的。每个<div>将是相同的宽度。我想将它们均匀地分布在容器中。我希望他们隔开 3，然后在下一行重新开始。但是，最后一行可能只有 1 或 2 个 <div> s 在其中，但它们需要保持与上述行相同的“网格间距”。

基本上，我想要表格类型间距，而不使用表格:)

这是一些示例 html。以下将出现在 4 行中，最后一行只有 1 项

<div id='container>
     <div class='item'>Content</div>
    <div class='item'>Content</div>
    <div class='item'>Content</div>
    <div class='item'>Content</div>
    <div class='item'>Content</div>
    <div class='item'>Content</div>
    <div class='item'>Content</div>
    <div class='item'>Content</div>
    <div class='item'>Content</div>
    <div class='item'>Content</div>
    <div class='item'>Content</div>
    <div class='item'>Content</div>
</div>

CSS:

div#container {
   width:600px;
}
div.item {
   width:180px;
}

我试过this page底部的方法但是当一行中只有 2 个元素时它会失败，因为它将第二个元素一直放在右边

Answer 1

我建议如下:

.item {
    float: left;
    width: 33%; /* basically 100 divided by however many items per row */
    box-sizing: border-box; /* to include the border dimensions (if any) */
}                           /* in the defined width of the element */

.item:nth-child(odd) {
    background-color: #aaa; /* aesthetics, just to see the individual items */
}

JS Fiddle demo .

引用资料:

• CSS box-sizing property .