Html 仅使用 CSS 的砌体式布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12117195/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Masonry-style Layout ONLY with CSS
提问by Bernat
As you can see in the image every box has a different height and there are some boxes with double width.
正如您在图像中看到的，每个盒子都有不同的高度，有些盒子的宽度是两倍。
Is it possible to create a masonry-style layout only with CSS?
是否可以仅使用 CSS 创建砖石风格的布局？
回答by Esailija
With css3 support you could do this:
有了 css3 支持，你可以这样做：
.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;
}?
With no css3 support, you have to resort to js unfortunately.
由于没有 css3 支持，不幸的是你不得不求助于 js。
回答by DavGarcia
I'm working on a site right now with the same kind of layout, two columns with the occasional double-wide box. What I do is just separate the double-wide from the rest of the content. For example:
我现在正在一个网站上工作，布局相同，两列偶尔会有双宽框。我所做的只是将双倍宽度与其余内容分开。例如：
<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>
Then you can apply the CSS3 column solution to just the two-columnsclass. If you need to support IE9 you'll sadly need to add a JavaScript fallback.
然后您可以将 CSS3 列解决方案应用于two-columns该类。如果您需要支持 IE9，您将遗憾地需要添加一个JavaScript fallback。
