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

这是我想要的布局：

现在，我所有的框都有一个右下边距，我必须删除第三个元素的右边距，以避免它溢出包装器并落到下一行

如果我调整包装器的大小，我必须手动校准边距以定位框，这最多也会让人感觉不舒服

我希望能有一个不比这复杂的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之外什么都不使用吗？

假设框之间的边距是20px。我建议在方框的底部和左侧设置边距。设置包装的宽度，使其适合所有框，包括它们的边距（在本例中为360px宽）。然后将包装的左边距设置为-20px

---

尽管这并不完全是我想要的，但它比我目前的方法有了很大的改进。谢谢

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

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