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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

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

回答：

#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清除修复程序的需要。

因此，我更改了上面的CSS和jsFiddle。 我保留了，display: table-

cell;以便父div用0填充来包装子div，看起来又漂亮又时髦！

以上是 如何将浮动div垂直对齐到底部？ 的全部内容， 来源链接： utcz.com/qa/415907.html

回到顶部