html - 如何创建具有流体定位的类似表格的布局？[内图]

Question

这是我正在寻找的布局：

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

如果我调整包装器的大小，我必须手动校准边距以定位框，这充其量感觉很hacky。

我希望做的是有一个不比这更复杂的 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。我建议将边距设置在框的底部和左侧。设置包装器的宽度，使其适合所有框，包括它们的边距（在本例中为 360 像素宽）。然后将包装器的 margin-left 设置为 -20px。

小提琴

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

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