如何浮动不同高度的元素？ [英] How to float elements with different heights?

问题描述

我正在开发一个响应式网页设计，并排浮动4列中的多个项目。

I'm working on a responsive webdesign that floats multiple items in 4 columns side by side. Those items have different heights and hence floating doesn't properly work.

这是目前发生的情况：

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

Any ideas on how to make the elements float like that:

我想这应该适用于jQuerymasonry，对不对？但是我使用Zepto.js，我猜一个jQuery插件不能工作。

I guess this should work with jQuery "masonry", right? However I'm working with Zepto.js and I guess a jQuery plugin wouldn't work.

有没有纯CSS（CSS3）的方式？

Is there any pure CSS (CSS3) way to that? Some trick or so?

如果这不适用纯CSS或JS，可以这样做：

If this wouldn't work with pure CSS or with JS is it possible to do this:

现在第二行的元素5,6和7不是真正浮动的方式，你会期望它，但有一个隐藏换行符（clearfix）里面。

Now the second row with elements 5, 6 and 7 is not "really" floating the way you would expect it but there is a hidden line-break (clearfix) inside.

有什么办法用纯CSS吗？例如。使用 nth-child（4n + 4）和：之后的伪选择器 content ？

Is there any way to that with pure CSS? E.g. use nth-child(4n+4) and a pseudo-selector like :after to apply a line-break with content?

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

Any ideas on that? Any clever tricks to make that work?

推荐答案

你可以只是应用清除每五个元素，方式在左边。我想在css3看起来像这样：

you could just apply a clear to every fifth element to force it to start all the way at the left. I think it would look something like this in css3:

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

jsFiddle demo

这篇关于如何浮动不同高度的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！