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。

Answer 2

大卫托马斯的回答是有效的，非常优雅。你想要的基本东西是'float：left'和33％的宽度，以确保每个div总是占据容器的1/3，而不管容器的大小。

另一种方法是使用类似bootstrap附带的流体网格系统。

这使您可以构建流畅的网格结构而不会弄乱CSS。您只需指定不同百分比宽度的行和列，例如：

<div id="container">
  <div class="row-fluid">
    <div class="span4"><div class="item">Content</div></div>
    <div class="span4"><div class="item">Content</div></div> 
    <div class="span4"><div class="item">Content</div></div> 
  </div>
  <div class="row-fluid">
    <div class="span4"><div class="item">Content</div></div>
    <div class="span4"><div class="item">Content</div></div> 
    <div class="span4"><div class="item">Content</div></div> 
  </div>
  <div class="row-fluid">
    <div class="span4"><div class="item">Content</div></div>
    <div class="span4"><div class="item">Content</div></div> 
    <div class="span4"><div class="item">Content</div></div> 
  </div>
  <div class="row-fluid">
    <div class="span4"><div class="item">Content</div></div>
    <div class="span4"><div class="item">Content</div></div> 
    <div class="span4"><div class="item">Content</div></div> 
  </div>
</div>

这是一个小提琴：http://jsfiddle.net/ZrBbD/

注意：此演示具有响应性，因此您可能必须使“结果”面板更宽，以便查看以3x4模式布局的div。

均匀间隔的网格动态内容

2 个答案: