Question

我有一个布局要求，右栏需要固定宽度，左栏应该跨越任何宽度。

据我所知，我可以从左列移除宽度和浮动，这会占用整个可用空间。

这就是我所拥有的

<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

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

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

Answer 2

在这里与display: table-***共舞： http://jsfiddle.net/EXNvF/

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

2 个答案: