css - CSS - 浮动 div 左对齐

Question

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

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

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

看看这些图片：在此处输入图像描述

score 1 · Accepted Answer

制作一个 jsfiddle 供人们玩耍。

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

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

score 0 · Accepted Answer

0

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

于 2012-07-29T11:46:42.563 回答

score 0 · Accepted Answer

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

编辑：

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

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

score 0 · Accepted Answer

0

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

于 2012-07-29T11:28:02.983 回答

4 回答 4