如何浮动不同高度的元素？

Question

我正在开发一个响应式网页设计,将4列中的多个项目并排放置.这些物品具有不同的高度,因此漂浮不起作用.

这就是目前发生的事情:

漂浮错误http://f.cl.ly/items/05233z0M0H0x1t1K331B/floating-wrong.png

关于如何使元素浮动的任何想法:

右侧漂浮http://f.cl.ly/items/300e1s0o0p1r1P3k2U3z/floating-right.png

我想这应该适用于jQuery"砌体",对吧？但是我正在使用Zepto.js,我猜一个jQuery插件不起作用.

是否有任何纯CSS(CSS3)方式？有些窍门？

如果这不适用于纯CSS或JS,则可以这样做:

浮动不同http://f.cl.ly/items/0p3O1k0d332c242c0G0F/floating-different.png

现在,第5行,第6行和第7行不会像你期望的那样"真正"浮动,但内部有一个隐藏的换行符(clearfix).

纯CSS有没有办法解决这个问题？例如使用nth-child(4n+4)和伪选择器喜欢:after应用换行符content吗？

有什么想法吗？任何聪明的技巧使这项工作？

Answer 1

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

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

jsFiddle演示

Answer 2

正如@Arieljuod所提到的,你可以用display: inline-block而不是float.它的美妙之处在于它可以在所有浏览器中运行(包括IE7 +以及下面的hack)并且完全流畅:

div {
    ...
    display: inline-block;
    vertical-align: top;
    margin-bottom: 0.3em;
    *display: inline;
    *margin-right: 0.3em;
    *zoom: 1;
    ...   
}

工作示例:http://jsfiddle.net/cRKpD/1/