仅使用CSS进行砌体式布局

Question

仅使用CSS进行砌体式布局正如您在图像中看到的那样，每个框都有不同的高度，并且有一些双倍宽度的框。是否可以仅使用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回退。