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

小编典典

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

css

如何使条形图的底部而不是顶部？现在它们粘在容器（#bars）的顶部，但我希望它们粘在底部。

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

应该简单吧？如果有帮助，它只能在不错的浏览器中工作。

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

阅读 549

2020-05-16

共1个答案

小编典典

这将达到目的：

#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;在默认情况下已vertical-align: baseline;应用的父div上使用。这改变了float: left;对子div 的需求，并允许我们使用display: inline- block;。这也消除了对CSS清除修复程序的需要。

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

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

2020-05-16