CSS Div：将 div 中的所有内容对齐到底部

Question

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

看看这个。我希望这些 div“#green”与底部对齐

Answer 1

这是怎么回事？

我将您的 float: left 更改为 display: inline-block ，默认情况下有一个 vertical-align:我相信基线。

查看如何为 IE6 和 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'});

    });
});