css - 3 列布局 1 列 2 行等间距

Question

我试图在 CSS 中实现这种响应式流体布局，因此每列具有相同的高度和宽度，中间列有 2 行并且列和行之间的空间应该相同，并且在调整大小时空间应该保持相等距离。每个 block 是一个图像。

看图片:

我已经尝试在每列中添加百分比，因此列之间的填充为 1%，第 2 列顶行的底部边距约为 8.3%，它似乎不太准确也不可靠，是否有更好的 ie8+向上。谢谢!

Answer 1

这应该可以做到。评论中的解释。

.container {
    width:100%;
    height:500px;
    -webkit-columns:auto 3;
    -moz-columns:auto 3;
    columns:auto 3;
    -webkit-column-gap:10px;
    -moz-column-gap:10px;
    column-gap:10px;
    box-shadow: 0 0 0 1px red; /* just to show container dimensions */
}
.container>div {
    background-color:grey;
    width:100%;
    height:100%;
    box-sizing:border-box; /* in case you plan on using padding */
}
.container>div:not(:nth-child(3n+1)) { /* second and third div from every set of 4 divs */
    height:calc(50% - 5px); /* minus half of the space between the two smaller boxes */
}
.container>div:nth-child(4n+2) { /* second div from every set of 4 divs, if there's only going to be one set, you can use :nth-child(2) instead */
    margin-bottom:10px; /* this should be the same as your column gap */
}

<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

---

编辑:

这是一个更简单的解决方案，它具有更好的浏览器支持:

table{
    width:100%;
    height:300px;
    border-spacing: 10px;
    border-collapse: separate;
}

td{
    background-color:grey;
}

<table>
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>