如何制作固定宽度的中心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列布局？

回答

相关问题