CSS - 浮动 div 左对齐答案

【问题标题】：CSS - floating divs align leftCSS - 浮动 div 左对齐
【发布时间】：2012-07-31 05:24:07
【问题描述】：

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

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

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

看看这些图片：

【问题讨论】：

【解决方案1】：

制作一个 jsfiddle 供人们玩耍。

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

编辑：

您始终可以使用 css 清除行中的第一项和每第三项：

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

【讨论】：

这很神奇，但我有 2 个不同的 div 类。
给他们一个额外的类......例如：class="class-one block"和class="class-two block"......我们在这里使用类“block”作为普通类

【解决方案4】：

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

【讨论】：