如何垂直对齐浮动div到底部？ [英] How to vertically align floating divs to the bottom?

问题描述

由于示例规则： http://jsfiddle.net/rudiedirkx/wgue7/

如何让酒吧到底部，而不是顶部？现在他们坚持在容器的顶部（ #bars ），但我希望他们坚持到底。

如你所见，我不知道最高柱的高度，所以我不知道容器的高度。

这些q + a不帮助：垂直对齐浮动div ，垂直对齐浮动DIV

应该很简单，对吗？如果它有帮助：它只需要工作在体面的浏览器。

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; code>在父div，默认情况下已应用 vertical-align：baseline; 。这改变了对子div的 float：left; 的需要，并允许我们使用 display：inline-block; 。

编辑 - Per @ thirtydot的注释，添加 vertical-align：

因此，我改变了底部CSS上面和jsFiddle。我保持 display：table-cell; ，以便父div用0填充整理子div，看起来不错，snazzy！

$ b

Because examples rule: http://jsfiddle.net/rudiedirkx/wgue7/

How do I get the bars to the bottom instead of the top? Now they're sticking to the top of the container (#bars) but I want them sticking to the bottom.

As you can see, I don't know the height of the highest bar, so I don't know the height of the container.

These q+a don't help: Vertically align floating divs, Vertically align floating DIVs

Should be simple, right? If it helps: it only has to work in decent browsers.

PS. Number of bars is variable (not in the example) and their heights are. Only their widths are static. Positioning absolute won't help, because the container div doesn't have measurements.

解决方案

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

It uses display: table-cell; on the parent div, which by default has vertical-align: baseline; applied. This changes the need for float: left; on the child divs and allows us to use display: inline-block;. This also removes the need for your CSS clear fix.

EDIT - Per @thirtydot's comments, adding vertical-align: bottom; to the child divs removes the gap at the bottom.

Therefore, I changed CSS above and jsFiddle. I kept the display: table-cell; so that the parent div wraps the child divs with 0 padding and looks nice and snazzy!

这篇关于如何垂直对齐浮动div到底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！