仅使用 CSS 的砌体式布局

Question

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

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

Answer 1

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

<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。

Answer 2

有了 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。