我可以在纯CSS中创建没有列的布局吗？

Question

我在我的博客上工作，当在> 1020px wide中查看时，使用三列将从左到右加载帖子（即将帖子1放在左栏中，将帖子2放在中间） ，右边三个，然后再从左栏开始）：

这很有效，但是当浏览器减少到1020以下时，布局将转换为单个列。通过将列放在彼此之下（看起来很好），可以很容易地实现这一点，但这会导致帖子无序 - 前三个帖子如果共有9个帖子实际上会发布1,4和7。

我想保持纯CSS托管布局的清洁度，所以我想知道在单个容器中使用浮动元素的上述三列布局是否有诀窍（而不是三列）。

我已经玩了一下，只是左右浮动并在每三个瓷砖后清理，但当然最终将每三个瓷砖放在上面“行”中最高瓷砖下面的“行”中。 / p>

Answer 1

我知道你说你想要纯CSS但是jQuery库Masonry是专门为这种东西设计的。

http://masonry.desandro.com/

否则我找不到使用纯交叉浏览器兼容的CSS实现此目的的好方法。