因为示例规则:http://jsfiddle.net/rudiedirkx/wgue7/
如何将条形图移到底部而不是顶部?现在他们坚持容器的顶部(#bars
),但我希望它们坚持到底部。
如您所见,我不知道最高栏的高度,所以我不知道容器的高度。
这些q + a无效:Vertically align floating divs,Vertically align floating DIVs
应该简单吧?如果它有帮助:它只需要在合适的浏览器中工作。
PS。条形数量是可变的(不在示例中),它们的高度是。只有它们的宽度是静态的。定位absolute
无济于事,因为容器div没有测量值。
答案 0 :(得分:50)
<强> 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填充包裹子div,看起来很漂亮,时髦!
答案 1 :(得分:37)
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: flex
和align-items: flex-end
。