如何使用流体定位创建类似于表格的布局？ [里面的图片]

Question

这是我正在寻找的布局：

现在，我的所有盒子都有一个右边距和下边距，我必须删除每个第三个元素上的右边距，以免它溢出包装并下降到下一行。

如果我调整包装器的大小，我必须手动校准边距以定位盒子，这样最好让人觉得很容易。

我希望做的是拥有一个并不比这个更复杂的HTML标记

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

产生上面看到的布局;扩展边距，直到同一行上有另一个盒子的空间，如果它太紧，则会折叠行。是否可以只使用CSS？

Answer 1

让我们说方框之间的差距是20px。我建议将边距设置在方框的底部和左侧。设置包装器的宽度，使其适合所有盒子，包括它们的边距（在这种情况下为360px宽）。然后将包装器的左边距设置为-20px。

Fiddle

#wrapper {
    width: 360px;
    height: 220px;
    margin-left: -20px;
}

.box {
    float: left;
    height: 100px;
    width: 100px;
    margin-left: 20px;
    margin-bottom: 20px;
    background: #f00;
}