如何製作固定寬度的中心3列布局？

我想用三列填充整個窗口進行佈局。中間列應居中在頁面中，並具有固定的寬度（以像素爲單位，而不是百分比）。左右div的寬度應該相等，但它們的寬度會隨着剩餘的窗口寬度而變化。如何製作固定寬度的中心3列布局？

下面是HTML：

<div id="wrapper"> 
    <div id="left"> 
     left content 
    </div> 
    <div id="middle"> 
     middle content 
    </div> 
    <div id="right"> 
     right content 
    </div> 
</div>

有沒有辦法只用CSS（沒有的JavaScript）做此佈局？如果不是可以用表格來完成嗎？

這是我迄今爲止發現的幾個鏈接，有三個列布局。沒有提供我需要的限制。

http://www.dynamicdrive.com/style/layouts/category/C10/
http://matthewjamestaylor.com/blog/perfect-3-column.htm

在此先感謝您的幫助。

編輯：
更具體地說，我想下面的持有：（像素值）

middle.width = 500 
left.width = right.width = (window.width <= 500) ? 0 : (window.width - 500)/2;

編輯：
這裏是一個JavaScript解決方案：

window.onresize = function() { 
    var width = ((window.innerWidth - 500)/2) + "px"; 
    document.getElementById("right").style.width = width; 
    document.getElementById("left").style.width = width; 
}

來源

2012-03-01 nikdeapen

在http://960.gs/ – Zoidberg 2012-03-01 13:47:57

你可以試試使用寬度= 100％和三列的表格，設置中間列靜態寬度。

<table width="100%"> 
    <tr> 
    //left col 
     <td> 
     </td> 

    //main col 
    <td style="width:500px;"> 
    </td> 

    //right col 
    <td> 
    </td> 

    </tr> 
</table>

嘗試在每一列中插入像DIV或P塊元素，空列行爲可能奇怪:)

來源

2012-03-01 14:25:18 Liviu

啊，偉大工程請看： HTTP ：//jsfiddle.net/wRL3j/26/ 我在左右數據元素中放置了一個空格，以防止它們摺疊。很遺憾，我不能使用它，因爲中間元素不能有最小寬度，並且屏幕摺疊時會出現僞像。 – nikdeapen 2012-03-01 15:52:20

編輯：可以有一個最小寬度，但左td元素不會完全崩潰。 – nikdeapen 2012-03-01 16:07:12

您是否嘗試將最小寬度添加到#left和#right？像http://jsfiddle.net/wRL3j/37/ – Liviu 2012-03-01 17:02:25

如何製作固定寬度的中心3列布局？

回答

相關問題