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

问题描述：

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

I have a layout requirement whereby the right column needs to be fixed width and the left column should span whatever width is available.

我知道我可以删除

这是我有的

<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>

任何想法？

答

您的代码正确无误。只需移动浮动元素：

Your code is correct. Just move the floated element up:

<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/

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

相关推荐