如何使流體中心沒有浮體3柱佈局

Question

我想創建一個三列布局，帶有靜態寬度的側邊欄和一個流體中心列。我不希望當頁面變得太窄時（列中心位置爲250px）列丟失，我想讓整個事情都凍結，並採用側滾動。很確定這不能用浮游物來完成。以下是我迄今爲止：

http://jsfiddle.net/eNDPG/210/

HTML：

<div id="header"> 
    Header 
</div> 
<div id="container"> 
<span id="leftcol"> 
    Text1 
</span> 
<span id="rightcol"> 
    Text3 
</span> 
<div id="centercol"> 
    Text2 
</div> 
</div> 
<div id="footer"> 
    Footer 
</div> 

CSS：

#container { 
overflow:hidden; 
width: 100%; 
float: left; 
} 

#leftcol { 
border: 1px solid #0f0; 
display: inline-block; 
float: left; 
width: 200px; 
} 

#rightcol { 
border: 1px solid #0f0; 
display: inline-block; 
float: right; 
width: 250px; 
} 

#centercol { 
border: 1px solid #000; 
overflow: hidden; 
} 

#header { 
border: 1px solid pink; 
width: 100%; 
} 

#footer { 
border: 1px solid pink; 
width: 100%; 
} 

Answer 1

沒有什麼錯CSS float。您可以在包裝上使用min-width屬性來設置最小寬度。

下面是一個例子：

HTML：

<div class="wrap"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
    <div class="center">Center</div> 
</div> 

CSS：

.wrap { 
    width: 100%; 
    min-width: 940px; 
} 

.left { 
    float: left; 
    width: 200px; 
} 

.center { margin: 0 205px; } 

.right { 
    float: right; 
    width: 200px; 
} 

JSBin Demo

更新：這裏是edited Fiddle

Answer 2

您可以使用

display:table; 

example