CSS具有一个固定宽度的列和另一个100％的宽度 [英] CSS with one fixed width column and another 100% width

问题描述

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

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％的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！