Question

我正在尝试实现一个布局，其中的项目将像报纸/杂志文章部分一样浮动。它与jQuery's Masonry的作用类似。但我试图只使用CSS3来实现这一目标。我想也许box显示属性可以做到。虽然经过几次尝试后，我无法在完成父列宽度后将项目向下滑动。

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

标记将是这样的：

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

这里的一个部分会向左浮动，并在列队列中调整自己，以便更好地适应（并且不要像前一个那样低于前一个的基线，就像简单的浮点一样）。

Answer 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”找到了这个网站。这是第二个结果。

如何在杂志/报纸等砖石布局中浮动元素？

1 个答案: