css - 如何将 float div 垂直对齐到底部？

Question

因为示例规则:http://jsfiddle.net/rudiedirkx/wgue7/

如何让条形图位于底部而不是顶部？现在它们粘在容器的顶部 (#bars)，但我希望它们粘在底部。

如您所见，我不知道最高栏的高度，所以我不知道容器的高度。

这些 q+a 没有帮助:Vertically align floating divs , Vertically align floating DIVs

应该很简单吧？如果有帮助:它只需要在合适的浏览器中工作。

附言。条的数量是可变的(不是在示例中)，它们的高度是可变的。只有它们的宽度是静态的。定位 absolute 无济于事，因为容器 div 没有测量值。

Answer 1

This will do the trick :

#bars {
    display: table-cell;
    border: solid 1px black;
}
#bars > div {
    display: inline-block;
    vertical-align: bottom;
    width: 5px;
    background-color: #999;
    margin-left: 2px;
}
#bars > div:first-child {
    margin-left: 0;
}

它在父 div 上使用 display: table-cell;，默认应用 vertical-align: baseline;。这改变了子 div 上对 float: left; 的需求，并允许我们使用 display: inline-block;。这也消除了对 CSS 清除修复的需要。

编辑 - 根据@thirtydot 的评论，将 vertical-align: bottom; 添加到子 div 可消除底部的间隙。

因此，我更改了上面的 CSS 和 jsFiddle。我保留了 display: table-cell; 以便父 div 用 0 填充包裹子 div，看起来漂亮又时髦!