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

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

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

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

     //right col
     <td>
     </td>

  </tr>
</table>

尝试在每个列中插入一个像div或p这样的块元素，空列可能表现得很奇怪：）

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

1 个答案: