頁腳3列，右和左固定，中心流體最大化

Question

我會獲得與左固定的寬度和右列和中央填充剩餘的空間中的3列腳註：

。
。
。
| [左] < ------中央------> [右] |

現在我正在使用此代碼，但中央專欄固定的寬度:(

.left 
{ 
    float:left; 
    width: 100px; 
} 
.central 
{ 
    float:left; 
    width: {xxx}px 
} 
.right 
{ 
    float:right; 
    width: 100px; 
} 

Answer 1

如果您修改源訂單，您可以繼續使用花車但只適用於左，右元素：

http://tinker.io/99f07/2

.left 
{ 
    float:left; 
    width: 100px; 
} 
.central 
{ 
    margin-left: 100px; 
    margin-right: 100px; 
} 
.right 
{ 
    float:right; 
    width: 100px; 
} 

<div class="left"> 
    Left 
</div> 

<div class="right"> 
    Right 
</div> 

<div class="central"> 
    Lorem ipsum dolor... 
</div> 

否則，改變所有的3個兄弟元素表的顯示類型β細胞會做的工作（作爲一個額外的好處，元素現在的高度相等）：

http://tinker.io/99f07/1

/* optional 
body { 
    display: table; 
    width: 100%; 
}*/ 

.left 
{ 
    display: table-cell; 
    width: 100px; 
} 
.central 
{ 
    display: table-cell; 
} 
.right 
{ 
    display: table-cell; 
    width: 100px; 
} 

Answer 2

http://jsfiddle.net/qtzKk/

使用絕對定位和left和right屬性，如果你想爲一個固定寬度的左手和右手divs

你可以用一個相對定位的div來包裝它，所以它不會與你的網站內容重疊。

Answer 3

嘗試這樣做：

CSS：

.left 
{ 
    float:left; 
    width: 100px; 
} 
.central 
{ 
    width: 100%; 
    margin: 0 auto; 
} 
.right 
{ 
    float: right;  
    width: 100px; 
} 

和你的HTML必須按上述順序（左，右和中央）工作：

<div class="left">test</div>  
<div class="right">test</div> 
<div class="central">test</div> 

我寫了 「測試」只是爲了看看結果。 =）

擁抱， Vin。