两个DIV并排并在底部垂直对齐

Question

我需要将两个DIV并排放置并在底部垂直对齐.

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

Answer 1

请参阅: 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;
}