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

Question

因为例子规则:http://jsfiddle.net/rudiedirkx/wgue7/

如何将条形图移到底部而不是顶部？现在他们正在坚持容器的顶部(#bars)但我希望它们坚持到底部.

如你所见,我不知道最高杆的高度,所以我不知道容器的高度.

这些q + a没有帮助:垂直对齐浮动div,垂直对齐浮动DIV

应该简单吧？如果它有帮助:它只需要在体面的浏览器中工作.

PS.条形数量是可变的(不在示例中),它们的高度是.只有它们的宽度是静态的.定位absolute无济于事,因为容器div没有测量值.

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

编辑 - Per @thirtydot的评论,添加vertical-align: bottom;到子divs消除了底部的差距.

因此,我改变了上面的CSS和jsFiddle.我保留了display: table-cell;这个,所以父div用0填充包裹子div,看起来很漂亮和时髦!

Answer 2

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.