CSS 如何将浮动div垂直对齐到底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6116423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertically align floating divs to the bottom?
提问by Rudie
Because examples rule: http://jsfiddle.net/rudiedirkx/wgue7/
因为示例规则：http: //jsfiddle.net/rudiedirkx/wgue7/
How do I get the bars to the bottom instead of the top? Now they're sticking to the top of the container (#bars) but I want them sticking to the bottom.
如何让条形图到达底部而不是顶部？现在它们粘在容器 ( #bars)的顶部，但我希望它们粘在底部。
As you can see, I don't know the height of the highest bar, so I don't know the height of the container.
如您所见，我不知道最高条的高度，因此我不知道容器的高度。
These q+a don't help: Vertically align floating divs, Vertically align floating DIVs
这些 q+a 没有帮助：垂直对齐浮动 div，垂直对齐浮动 DIV
Should be simple, right? If it helps: it only has to work in decent browsers.
应该很简单吧？如果有帮助：它只需要在不错的浏览器中工作。
PS. Number of bars is variable (not in the example) and their heights are. Only their widths are static. Positioning absolutewon't help, because the container div doesn't have measurements.
附注。条形的数量是可变的（不在示例中），它们的高度是可变的。只有它们的宽度是静态的。定位absolute无济于事，因为容器 div 没有测量值。
回答by Code Maverick
#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;
}
It uses display: table-cell;on the parent div, which by default has vertical-align: baseline;applied. This changes the need for float: left;on the child divs and allows us to use display: inline-block;. This also removes the need for your CSS clear fix.
它display: table-cell;在默认情况下已vertical-align: baseline;应用的父 div 上使用。这改变了float: left;对子 div的需求，并允许我们使用display: inline-block;. 这也消除了对 CSS 清除修复的需要。
EDIT - Per @thirtydot's comments, adding vertical-align: bottom;to the child divs removes the gap at the bottom.
编辑 - 根据@thirtydot 的评论，添加vertical-align: bottom;到子 div 会消除底部的间隙。
Therefore, I changed CSS above and jsFiddle. I kept the display: table-cell;so that the parent div wraps the child divs with 0 padding and looks nice and snazzy!
因此，我更改了上面的 CSS 和 jsFiddle。我保留了display: table-cell;这样，父 div 用 0 填充包裹子 div，看起来又漂亮又时髦！
回答by Rudie
FLEXBOX! Flexbox is the most bestest.
弹性箱！Flexbox 是最好的。
Example: http://jsfiddle.net/rudiedirkx/7FGKN/
示例：http: //jsfiddle.net/rudiedirkx/7FGKN/
Flexbox makes this ridiculously simple (and not to forget correct):
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 */
}
That's it Two lines of CSS: display: flexand align-items: flex-end.
两行 CSS:display: flex和align-items: flex-end.
