CSS - 浮动divs左对齐

Question

我在页面上有6个浮动div（左对齐）。这些div有2种不同的宽度（取决于图像（））。一个div有295px而另一个有216px。高度由HTML自动计算。容器有1050px，所以在容器的一个“线”中我可以插入3个div，另外3个在第二个“line”上。

CSS规则正在运行，所有div都浮动到左边，每个div都有20px的边距，但问题是它们的对齐方式。我想将这些div对齐。目前，如果某些图片的高度不同，则在第二个“线”上有一些空格（因为上面图片的高度）。

我想要一些东西在Y坐标上浮动这些div（比例）。

看看这张照片：

Answer 1

为人们提供一个jsfiddle。

但是，您可能希望为每一行创建一个容器div。这封装了3个内部div，与它们一样高，允许下一个容器很好地适合

看我的小提琴：http://jsfiddle.net/TJxmT/

Answer 2

浮动div的最小高度不会解决问题吗？

Answer 3

尝试使用名为Masonry的jQuery插件来修复该布局......你会感到惊讶！

编辑：

您始终可以使用css清除行中的第1项和第3项：

li:nth-child(3n+4) { clear:left; }

Answer 4

您是否尝试在新行的每个第一个div上添加clear: both;？