仅使用CSS实现瀑布流式布局

Question

正如您在图像中所看到的，每个方框的高度都不同，有些方框宽度是双倍。

是否可能只使用 CSS 创建瀑布流式布局？

- Bernat

---

你可以参考这个链接：http://sickdesigner.com/index.php/2011/html-css/masonry-css-getting-awesome-with-css3/ 如果有些浏览器不支持CSS3，你需要使用jquery-masonry脚本。更多的参考资料请看：http://designshack.net/articles/css/masonry/ - user1512616

嘿，伙计，我记得这个网站，不知道你是否想要检查一下。我真的不记得它是使用JS还是纯CSS，但肯定不是使用砖石布局。http://www.leica-oskar-barnack-award.com/ 希望能帮到你。 - Paradise

你的代码在哪里？你尝试过在线沙盒或jsfiddle吗？如果你在SO上搜索，就会发现不可能用CSS复制Masonry并使其跨浏览器和跨设备正常工作。 - Systembolaget

放松一下，慢慢呼吸... ;) - Bernat

可能是Masonry layout with css grid的重复问题。 - TylerH

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的支持，不幸的是你需要使用JavaScript。

- Esailija

---

就像我说的一样，有一些具有双倍宽度的盒子！（在这种情况下是2列）。是的，我可以使用CSS3！ - Bernat

我已经探索了很长时间，仅使用CSS是不可能的。 - alt

这种解决方案存在的问题是，项目按自上而下、从左到右排列，而人们通常期望的是从左到右、自上而下的布局方式（除去文化假设）。这是通常基于CSS3列的建议无法实现的主要原因。 - user713516

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。

- DavGarcia