如何垂直alignment浮动div到底部？
因为例子规则： http : //jsfiddle.net/rudiedirkx/wgue7/
我怎么让酒吧底部而不是顶部？ 现在他们坚持到容器的顶部（ #bars ），但我希望他们坚持到底部。
正如你所看到的，我不知道最高的酒吧的高度，所以我不知道容器的高度。
这些q + a没有帮助： 垂直alignment浮动div ， 垂直alignment浮动DIV
应该很简单吧？ 如果有帮助：只需要在体面的浏览器中工作。
PS。 酒吧的数量是可变的（不是在这个例子中），他们的高度是。 只有它们的宽度是静态的。 定位absolute不会帮助，因为容器格没有测量。
这将做的伎俩 ：
#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; }
它使用display: table-cell; 在父div，默认情况下有vertical-align: baseline; 应用。 这改变了对float: left;的需要float: left; 在子div上，并允许我们使用display: inline-block; 。 这也消除了您的CSS清除修复的需要。
编辑 – Per @ thirtydot的评论，增加vertical-align: bottom; 给孩子的divs删除底部的差距。
所以，我改变了CSS和jsFiddle。 我保持display: table-cell; 让父div用0填充儿童div，看起来不错，时髦！
Flexbox的！ 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 。
