浮动div离开,使所有div高度等于它的行中最高的div？

Question

我正在尝试一种设计,它会将一系列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

Answer 2

答案会有所不同，具体取决于您打算如何实现它。如果您坚持使用 css 2，那么解决方案是 javascript（强制所有“列”与 javascript 具有相同的高度）或在 css2 中伪造列布局的多种方法中的任何一种。这里以http://www.search-this.com/2007/02/26/how-to-make-equal-columns-in-css/为例。

有一个 CSS3 草案提案支持多列布局。目前大多数非 ie 浏览器（至少是最新版本）都支持此功能。但是，如果您重视可访问性/没有后备方案，那么您将勇敢地投入生产环境。有关详细信息，请参阅此处http://www.w3.org/TR/css3-multicol/。