如何在杂志/报纸等砌体布局中浮动元素？答案

【问题标题】：How to float elements in a masonry layout like magazine/newspaper?如何在杂志/报纸等砌体布局中浮动元素？
【发布时间】：2012-01-07 22:12:04
【问题描述】：

我正在尝试实现一种布局，其中项目会像报纸/杂志文章部分一样浮动。这与jQuery's Masonry 所做的类似。但我试图仅使用 CSS3 来实现这一目标。我想也许box 显示属性可以做到这一点。虽然在尝试了几次之后，我无法让项目在父列宽度满足后向下滑动。

有没有办法只使用 CSS 来实现这种布局？

标记将是这样的：

<article>
    <section>...</section>
    <section>...</section>
    <section>...</section>
    <section>...</section>
</article>

这里的一个部分会向左浮动并在更适合的列队列上调整自身（而不是像简单浮动那样低于前一个的基线）。

【问题讨论】：

标签： layout css css-float jquery-masonry flexbox

【解决方案1】：

可以使用 CSS 列。 Here 是一个很好的解释。

CSS：

div{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 480px; }

div a{
display: inline-block; /* Display inline-block, and absolutely NO FLOATS! */
margin-bottom: 20px;
width: 100%; }

HTML：

<div>
<a href="#">Whatever stuff you want to put in here. Images, text, movies, what have you. No, really, anything!</a>
...and so on and so forth ad nauseum.
</div>

另外，我通过在 Google 上搜索“CSS Masonry”找到了这个网站。这是第二个结果。

【讨论】：

请注意，IE 不支持列，但我链接到的站点解释了如何使用 jQuery 插件作为后备。