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。

Fiddle

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

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

关于html - 如何使用流体定位创建类似表格的布局？ [内部图片]，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16165605/