CSS Div：如果div为bottom，则对齐所有内容

Question

我正在尝试构建此图...这是问题

TAKE A LOOK AT THIS ..我希望这些div“#green”与底部对齐

Answer 1

How is this?

我将您的float: left更改为display: inline-block，默认情况下我认为vertical-align: baseline。{/ p>

Check out how to do one for IE6 and IE7.

另外，作为旁注，您应该将一个id属性分配给一个元素。否则请使用课程。

Answer 2

你去：http://jsfiddle.net/SebastianPataneMasuelli/uYghh/16/

更改left值以移动它们。

编辑：更新样本以获得正确的边距。

Answer 3

请将绿色div的id属性更改为彼此不同的东西
  http://jsfiddle.net/uYghh/33/

Answer 4

删除float:left;使用display:inline-block;

Answer 5

通过此

更改您的CSS

#green
{
    position: relative;
    float : left;
    width  : 20px;
    top:100%;
    margin : 5px;
    border: solid 1px #0fb551;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#0fb551), to(#064d23));
    background: -moz-linear-gradient(#0fb551, #064d23);
    background: linear-gradient(#0fb551, #064d23);   
    -pie-background: linear-gradient(#0fb551, #064d23);
    behavior: url(pie.htc);    
}

Add some jQuery to your project

$(function(){
    $('#graph div').each(function(){
        var ht=$(this).height();
        $(this).css({'margin-top':-ht-4+'px'});

    });
});