html - 仅使用 CSS 的砌体式布局

Question

正如您在图像中看到的，每个盒子都有不同的高度，并且有些盒子的宽度是双倍的。

是否可以仅使用 CSS 创建砖石风格的布局？

Answer 1

使用 css3 支持，您可以这样做：

http://jsfiddle.net/huAxS/2/

.container {
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
    width: 360px;
}

.container div {
    display: inline-block;
    width: 100%;
    background-color: red;
}​

没有css3支持，不幸的是你不得不求助于js。

Answer 2

我现在正在一个具有相同布局的站点上工作，两列偶尔有双宽框。我所做的只是将双宽与其他内容分开。例如：

<div class="two-columns">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="double-wide">
</div>
<div class="two-columns">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

然后，您可以将 CSS3 列解决方案应用于two-columns该类。如果您需要支持 IE9，您很遗憾需要添加JavaScript fallback。