html - 向左浮动 div，使所有 div 的高度等于它所在行中最高的 div？

Question

我正在尝试一种将一系列 div float 到左侧的设计，这些 div 都是同一类。我希望 div 适合行，其中每行中的 div 高度相同，以便行和设计元素之间没有破损。有没有办法做到这一点，或者我基本上必须预设每个 div 的高度？

我向左浮动是因为如果浏览器的宽度更窄，我希望行更短。

我认为这令人困惑。附件是我正在尝试做的事情的图像。

Answer 1

我认为有三种选择:

在您的 div 样式中声明高度

看起来是最简单的答案，而且由于所有 div(在图像中)看起来高度完全相同，所以这对我来说似乎不是问题:

div.class {
    height: 300px;
}

创建行容器

为每行div创建一个容器并定义它​​的高度，然后给每个子div设置100%的高度:

div.row-container { height: 300px; }
div.class         { height: 100%; }

使用表格

不要害怕使用 table 元素以表格方式显示数据。我不确定您的 div 在语义上可以用表行和列替换的效果如何。但请将其作为潜在候选者考虑一下。

---

编辑:我最初误解了，以为你想准确地模拟图像。我的解决方案是假设一个恒定的高度(你表达了可能避免的愿望)。与该立场相反的观点是，在视觉上，高度相同的行令人赏心悦目，最终您希望对列的高度进行一些控制。

但是不使用 JS 也可以完全按照您的意愿行事:

http://matthewjamestaylor.com/blog/equal-height-columns-5-column.htm