我正在写我的博客，当以 > 1020px 宽 查看时，它看起来像这样，使用三列从左到右加载帖子(即，将帖子 1 放在左列中，中间 2 个，右边 3 个，然后再次从左栏开始):
这很好用，但是当浏览器缩小到 1020 以下时，布局将转换为单列。这在视觉上很容易通过将列放在彼此下面来实现(看起来不错)，但这会导致帖子乱序 - 如果总共有 9 个帖子，前三个帖子实际上会被发布1、4 和 7。
我想保持纯 CSS 管理布局的整洁，所以我想知道在单个容器(而不是三列)中使用 float 元素的上述三列布局是否有技巧).
我玩了一些游戏，只是向左漂浮并在每三个方 block 后清理一次，但当然最终只是将每三个方 block 放在上面“行”中最高方 block 下方的“行”中。
最佳答案
我知道你说过你想要纯 CSS，但 jQuery 库 Masonry 是专门为这种东西设计的。
否则，我还没有找到使用纯跨浏览器兼容 CSS 实现此目的的好方法。
关于html - 我可以在纯 CSS 中创建没有列的布局吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12522590/