仅使用CSS进行砌体式布局

Question

仅使用CSS进行砌体式布局

正如您在图像中看到的那样，每个框都有不同的高度，并且有一些双倍宽度的框。

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

Answer 1

我现在正在一个网站上使用相同类型的布局，两列偶尔会有双宽框。我所做的只是将双倍宽度与其他内容分开。例如：<div&nbsp;class="two-columns"> &nbsp;&nbsp;&nbsp;&nbsp;<div></div> &nbsp;&nbsp;&nbsp;&nbsp;<div></div> &nbsp;&nbsp;&nbsp;&nbsp;<div></div> &nbsp;&nbsp;&nbsp;&nbsp;<div></div></div><div&nbsp;class="double-wide"></div><div&nbsp;class="two-columns"> &nbsp;&nbsp;&nbsp;&nbsp;<div></div> &nbsp;&nbsp;&nbsp;&nbsp;<div></div> &nbsp;&nbsp;&nbsp;&nbsp;<div></div> &nbsp;&nbsp;&nbsp;&nbsp;<div></div></div>然后，您可以将CSS3列解决方案应用于two-columns该类。如果你需要支持IE9，你很遗憾地需要添加一个JavaScript回退。