3列布局1列，2行等间距

Question

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

见图：

我已尝试在每列中添加百分比，因此列之间的填充率为1％，第2列顶行的底部边缘为8.3％，它看起来不准确也不可靠，是否有更好的效果从ie8 +起作用。谢谢！

Answer 1

这应该这样做。评论中的解释。

＆＃13;

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑：

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

＆＃13;

＆＃13;

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

td{
    background-color:grey;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;