如何将浮动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 的 cmets，将 vertical-align: bottom; 添加到子 div 会消除底部的间隙。

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

Answer 2

弹性盒子！ Flexbox 是最好的。

示例：http://jsfiddle.net/rudiedirkx/7FGKN/

Flexbox 让这变得非常简单（别忘了正确）：

#container {
  display: flex; /* or inline-flex */
  flex-flow: row nowrap; /* is default: columns along the main-axis (row) and no wrapping to next lines */
  align-items: flex-end; /* bottom */
}
#container > div {
  /* margin etc here, but nothing layoutish */
}

就是这样两行 CSS：display: flex 和 align-items: flex-end。