css - 如何制作固定宽度的中心 3 列布局？

Question

我正在尝试制作一个包含三列的布局来填充整个窗口。中间列应位于页面中央并具有固定宽度(以像素为单位，而不是百分比)。左右 div 的宽度应相等，但它们的宽度会随着剩余窗口宽度的变化而变化。

这是 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; 
}​

Answer 1

您可以尝试使用 width=100% 和三列的表格，设置中间列静态宽度。

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

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

     //right col
     <td>
     </td>

  </tr>
</table>

尝试在每一列中插入一个 block 元素，如 div 或 p，空列可能表现得很奇怪:)