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

olqngx59  于 2023-05-19  发布在  其他
关注(0)|答案(2)|浏览(125)

因为示例规则:http://jsfiddle.net/rudiedirkx/wgue7/
我如何让酒吧的底部而不是顶部?现在它们粘在容器的顶部(#bars),但我希望它们粘在底部。
正如你所看到的,我不知道最高的酒吧的高度,所以我不知道容器的高度。
这些q+a没有帮助:Vertically align floating divsVertically align floating DIVs
应该很简单吧如果有帮助的话:它只需要在像样的浏览器中工作。
条的数量是可变的(不在示例中),它们的高度是。只有它们的宽度是静态的。定位absolute没有帮助,因为容器div没有度量。

mbyulnm0

mbyulnm01#

This will do the trick

#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;
}

它在父div上使用display: table-cell;,默认情况下应用了vertical-align: baseline;。这改变了子div对float: left;的需求,并允许我们使用display: inline-block;。这也消除了对CSS清除修复的需要。

***编辑-根据@thirtydot的评论,将vertical-align: bottom;添加到子div删除底部差距。

  • 因此,我更改了上面的CSS和jsFiddle。我保留了display: table-cell;,这样父div就可以用0填充来 Package 子div,看起来很漂亮很时髦!*
pkwftd7m

pkwftd7m2#

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: flexalign-items: flex-end

相关问题