div填補餘下的空間（寬度）

Question

嘿那裏我有一個100％的寬度（電腦屏幕的寬度可以是任何東西）在這個寬度內我有兩個孩子的div一個固定寬度說50px，我想別的孩子div來佔用剩餘的（100％-50px）空間誰能告訴我我如何做到這一點請....

我在此代碼，如果50做過類似

<div style="width:100%;min-height:90px;"> 
<div style="float:left;width:50px;height:60px;"> 
</div> 
<div style="float:left;width:90%;height:60px;"> 
</div> 
</div> 

px不是屏幕的10％，有一些我不想要的空白空間

Answer 1

你可以使用表佈局：

HTML：

<div class="container"> 
    <div class="fixed-width"></div> 
    <div class="fluid-width"></div> 
</div> 

CSS：

.container { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 

.fixed-width { 
    display: table-cell; 
    width: 50px; 
} 

.fluid-width { 
    display: table-cell; 
} 

http://jsfiddle.net/myajouri/zJq8N/

OR ...

您可以使用width: calc(100% - 50px)這是not supported in IE8 and below。

.container { 
    width: 100%; 
} 

.fixed-width { 
    float: left; 
    width: 50px; 
} 

.fluid-width { 
    float: left; 
    width: calc(100% - 50px); 
} 

http://jsfiddle.net/myajouri/mTq6x/

Answer 2

jsFiddle

只有浮在固定寬度的元件。

CSS：

.container { 
    height: 10px; 
    width: 100%; 
} 
.right { 
    background: red; 
    height: 10px; 
} 
.left { 
    background: blue; 
    width: 50px; 
    height: 10px; 
    float: left; 
} 

HTML：

<div class="container"> 
<div class="left"> 
</div> 
<div class="right"> 
</div> 
</div>