3

我正在研究我的博客,当查看时> 1020px wide看起来像这样,使用三列从左到右加载帖子(即将帖子 1 放在左栏中,帖子 2 放在中间,三个放在右边,然后开始再次从左列):

在此处输入图像描述

这很好用,但是当浏览器缩小到布局下方时1020,布局将转换为单列。这在视觉上很容易通过将列放在彼此下方来实现(看起来不错),但这会导致帖子乱序- 如果总共有 9 个帖子,前三个帖子实际上是帖子 1、4 和 7。

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

我已经玩了一点,只是在每三个瓷砖后向左浮动并清除,但当然最终只是将每三个瓷砖放在上面“行”中最高瓷砖下方的“行”中。

4

1 回答 1

5

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

http://masonry.desandro.com/

否则,我还没有找到使用纯跨浏览器兼容 CSS 实现这一目标的好方法。

于 2012-09-21T00:01:44.230 回答