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

前端之家收集整理的这篇文章主要介绍了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;
}

猜你在找的CSS相关文章