css - 如何让浮动的 div 填满剩余的宽度？

Question

我有一个 divfloat: left和一个 div float: right。float: left具有宽度的div 50px，而具有 的 divfloat: right应该占用父 div 中剩余的水平空间。

我怎样才能用 CSS 做到这一点？

Answer 1

尝试使用margin-left:60px（或您的左 div 可能的任何宽度）而不float在右 div 中使用。在此处查看相关小提琴：http: //jsfiddle.net/CKcQH/

CSS：

.leftDiv
{
    width:50px;
    float:left;
    border:1px solid red;
}
.rightDiv
{
    margin-left:55px; /* Compute total width of leftDiv */
    border:1px solid blue;
}

html:

<div>
    <div class="leftDiv">
        My content on left
    </div>
    <div class="rightDiv">
        My content on right should take all the space the parent has (after excluding the space on the left)
    </div>
</div>