css - 如何让 float div填满剩余宽度？

Question

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

如何使用 CSS 实现此目的？

Answer 1

尝试使用 margin-left:60px (或者左侧 div 的任何宽度)，而不在右侧 div 中使用 float 。请参阅此处相关的 fiddle :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>