html - 如何创建具有流动定位的类似表格的布局？ [里面的图片]

Question

这是我正在寻找的布局:

现在，我所有的盒子都有右边距和底部边距，我必须移除每个第 3 个元素的右边距，以免它溢出包装并落到下一行。

如果我调整 wrapper 的大小，我必须手动校准边距以定位盒子，这充其量感觉很笨拙。

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