1

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

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

这是一些示例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;
}

我已经尝试过此页面底部的方法，但是当连续只有 2 个项目时它会失败，因为它将第二个项目一直放在右边

4

2 回答 2

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 小提琴演示。

参考：

于 2013-04-25T17:06:44.617 回答
0

大卫托马斯的回答很有效，而且非常优雅。您缺少的基本内容是“浮动：左”和 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。

于 2013-04-25T17:42:29.910 回答