如何設置混合寬度容器（px和％）？

Question

我相信這一定很明顯，但我有點卡在這裏。 我想建立一個工具，我需要一個工具箱和一個工作區。 所以我想將工具箱定位爲左側的固定寬度（比如250px），並讓工作區使用屏幕上剩餘的可用空間。

我試圖與這兩個DIV和表，但工作區保持工具箱下方移動，因爲它變得更大（這樣兩個部分不相鄰修復）

我怎樣才能獲得工作區做？

這裏的HTML：

<div id="container" style="width: 100%"> 
    <div id="toolbox" style="width: 250px"> 
    </div> 
    <div id="workspace"> <!-- this keeps jumping to the next line --> 
    </div> 
</div> 

Answer 1

您需要浮動工具箱：

#toolbox { 
    float: left; 
    width: 250px; 
} 

/* also you should contain the floated element */ 
#container:after { 
    content: ' '; 
    display: block; 
    clear: both; 
} 

而且，不給寬度或漂浮到#workspace，它將你的工具箱和之間滑動容器的剩餘寬度。

Answer 2

嵌套您的div更深1級，您可以使用表佈局。

<style> 
#container { display:table; width:100% } 
#container > div { display:table-row } 
#container > div > div { display:table-cell } 
</style> 

<div id="container"> 
    <div> 
    <div id="toolbox" style="width: 250px"> 
    </div> 
    <div id="workspace"> 
    </div> 
    </div> 
</div> 

Answer 3

其實我需要的東西就像這個小提琴。溢出的伎倆我想

overflow: auto; 

http://jsfiddle.net/cmT4x/

謝謝！