具有一個固定寬度列和另一個100％寬度的CSS

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

你的代碼是正確的。與display: table-***這裏

<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

共舞：剛上來移動浮動元素 http://jsfiddle.net/EXNvF/