具有一个固定宽度列和另一个 100% 宽度的 CSS

Question

我有一个布局要求，右列需要固定宽度，左列应跨越可用的任何宽度。

我知道我可以从左列中删除宽度和 float ，这应该会占用整个可用空间。

这是我的

<div style="height:300px;border:1px solid red;padding:10px;">
    <div style="height:200px;border:1px solid red;margin-right:150px;">
        this should take all width
    </div>
    <div style="height:200px;border:1px solid green;float:right;width:120px;">
        this is right bar with fixed width
    </div>    
</div>

有什么想法吗？

Answer 1

您的代码是正确的。只需将 float 元素向上移动:

<div style="height:300px;border:1px solid red;padding:10px;">
    <div style="height:200px;border:1px solid green;float:right;width:120px;">
        this is right bar with fixed width
    </div>  
    <div style="height:200px;border:1px solid red;margin-right:150px;">
        this should take all width
    </div>  
</div>

http://jsfiddle.net/wwEQb/