css – 两个DIV并排,并垂直排列在底部

我需要两个DIV并排放置在他们的底部垂直线。

>橙色div没有宽度或高度。它可以根据他的内容而增长
>我应该可以使用绿色div的填充和边距
>我想要一个没有使用javascript的解决方案

解决方法

参见： http://jsfiddle.net/thirtydot/J9eds/

我已经使用display：inline-block与vertical-align：bottom结合。

HTML：

<div id="container">
    <div id="left">
        left<br />left<br />left<br />left<br />left<br />left<br />
        leftleftleftleftleftleft
    </div>
    <div id="right"></div>
</div>

CSS：

#container {
    border: 1px solid red;
    float: left;
}
#left,#right {
    border: 2px solid red;
    background: #ccc;

    vertical-align: bottom;
    display: inline-block;
    /* ie6/7 */
    *display: inline;
    zoom: 1;
}
#right {
    margin: 20px 20px 0 20px;
    padding: 20px;
    width: 100px;
}