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

发布时间:2019-11-09 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了css – 如何垂直对齐浮动div到底部?脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
因为示例规则: http://jsfiddle.net/rudiedirkx/wgue7/

如何让酒吧到底部,而不是顶部?现在他们坚持在容器的顶部(#bars),但我想让他们坚持到底部。

如你所见,我不知道最高的酒吧的高度,所以我不知道容器的高度。

这些q a不帮:Vertically align floating divsVertically align floating DIVs

应该简单,对吧?如果它有帮助:它只需要工作在不错的浏览器。

PS。条数是可变的(不在示例中),它们的高度为。只有它们的宽度是静态的。定位绝对不会有帮助,因为容器div没有测量。

解决方法

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

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

EDIT – Per @ thirtydot的评论,添加vertical-align:bottom;到子div去除底部的间隙。

因此,我改变了CSS和jsFiddle。我保持显示:table-cell;所以父div包装的孩子divs与0填充,看起来不错和snazzy!

总结

以上是脚本之家为你收集整理的css – 如何垂直对齐浮动div到底部?全部内容,希望文章能够帮你解决css – 如何垂直对齐浮动div到底部?所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。

脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ” ,选择关注!
精选程序员所需精品干货内容!

标签: