让最高的div决定一排的高度

Question

我必须创建一个具有不同高度的3个div的行，但它们都必须与行的底部对齐，并且行必须是最高子div的高度。

这是我的意思的一个例子。

http://cl.ly/997cd739550635df3bbf

这是我的尝试：

div1 {
position: absolute;
bottom: 0;
left: 0;
}

.div2 {
height: 100%;
float: left;
width: 300px
position: relative;
}

.row {
}

但除非我设置.row的高度所有div2堆叠在彼此之上。根据最高的儿童div，有没有办法让行的高度变得流畅？

Answer 1

问题是当你只需要浮动div时，你正在使用position:absolute（和position:relative）。

position:absolute除了修复页面中div的位置之外，它将从页面的正常流程中取出（也就是说，放在另一层中），这就是你的div堆叠的原因。

我建议使用display:inline-block标记div并使用vertical-align:bottom代替bottom。

Answer 2

在CSS中怎么样：

display: inline-block;
vertical-align: bottom;