javascript - 如何 float 不同高度的元素？

Question

我正在设计一种响应式网页设计，它可以并排 float 4 列中的多个元素。这些元素具有不同的高度，因此 float 无法正常工作。

这是目前发生的事情:

关于如何使元素像这样 float 的任何想法:

我想这应该可以与 jQuery“masonry”一起使用，对吧？但是我正在使用 Zepto.js，我猜 jQuery 插件不会工作。

有没有纯 CSS (CSS3) 的方法？有什么技巧吗？

如果这对纯 CSS 或 JS 不起作用，是否可以这样做:

现在包含元素 5、6 和 7 的第二行并没有像您期望的那样“真正地” float ，而是里面有一个隐藏的换行符 (clearfix)。

有什么办法可以用纯 CSS 实现吗？例如。使用 nth-child(4n+4) 和类似 :after 的伪选择器来应用带有 content 的换行符？

对此有什么想法吗？有什么聪明的技巧可以让它发挥作用吗？

Answer 1

您可以对每五个元素应用一个清除以强制它从左边开始。我认为它在 css3 中看起来像这样:

div#wrapper > *:nth-child(4n+1) {
   clear: both;
}

jsFiddle demo