Css 如何将浮动div垂直对齐到底部？

因为示例规则：

我怎样才能把铁条放到底部而不是顶部？现在它们粘在容器的顶部（

#条

），但我希望它们粘在底部

正如你所看到的，我不知道最高横杆的高度，所以我不知道容器的高度

这些q+a没有帮助：

应该很简单，对吗？如果有用的话：它只需要在体面的浏览器中工作

PS.钢筋数量是可变的（不在示例中），其高度为。只有它们的宽度是静态的。定位

绝对值
没有帮助，因为容器div没有测量值。
：

使用
显示：表格单元格，默认情况下具有
垂直对齐：基线已应用。这改变了对
float:left的需要并允许我们使用
显示：内联块。这也消除了CSS清除修复的需要

编辑-根据@thirtydot的评论，添加
垂直对齐：底部到子div删除底部的间隙。

因此，我改变了上面的CSS和JSFIDLE。我保持
显示：表格单元格
这样父div就可以用0填充子div，看起来又漂亮又时髦
 FLEXBOX！Flexbox是最棒的

例如：

Flexbox使这一点变得非常简单（不要忘记正确）：

这就是两行CSS：
display:flex
和
align items:flex end
我已经更新了答案和JSFIDLE，但是如果您只是将填充改为
padding:5px 5px 0这将解决问题。哦，我删除了
垂直对齐：底部
默认为
垂直对齐：基线
。仅供参考，如果您需要支持IE7，它不支持
显示：表格单元格
，尽管我认为这是最好的答案。@Paul-他确实说过它只适用于现代浏览器，这就是我为什么使用我所做的=D@Scott：要删除底部的“填充”（实际上不是
填充
），需要
垂直对齐：底部
。此外，如果在
div
s上使用
display:inline block
，则不需要
display:table cell
。我还添加了使
内联块
在IE6/7中工作的技巧。请看：-我意识到我本可以发布我自己对这个问题的答案和所有这些细节，但我是一个好人：）他们不是已经排到了底部了吗？或者你想让他们就在边境上？看起来它们已经与垂直对齐：底部对齐；是的，罗伯斯说的。如果您只想让这些条接触底部边框，那么您所要做的就是删除
填充：5px
.Flexbox太酷了，大多数时候你甚至不需要处理浮动，因为你不能浮动flex项目！（您仍然可以浮动flex容器或flex项目中的任何内容，这很好，并且不会让flexbox变得不那么棒。）+1，这是了解flexbox的好来源。值得注意的是，在这一点上，它似乎只是一个WC3建议。有人能正式证实或否认这一点吗？它目前的浏览器支持也可以在这些链接上找到。浏览器支持才是最重要的，现在它实际上非常好。IE10实现了旧的方法（但大部分是可行的）。IE11是酷俱乐部的一部分。这是什么魔法？
#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;
}

#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 */
}