具有可变边的三栏网页设计

Question

我一直在尝试想出一种方法来创建 3 列网页设计，其中中心列具有恒定的宽度并且始终居中。左侧和右侧的列是可变的。这在表中是微不足道的，但在语义上并不正确。我无法在所有当前浏览器中使其正常工作。这方面有什么建议吗？

Answer 1

使用 这项技术, ，并简单地为中心列指定固定宽度。

Answer 2

看一下这个： http://www.glish.com/css/2.asp

并替换宽度：#maincenter 的 xx% 为固定值。当我用 Firebug 更改它时似乎可以工作，值得一试吗？

#maincenter {
    width: 200px;
    float:left;
    background:#fff;
    padding-bottom:10px;
    }

Answer 3

我认为您需要从两个侧边栏列的初始（固定）宽度开始，然后在页面加载时，使用 javascript 获取窗口宽度并计算侧边栏的新宽度。

侧边栏宽度 =（窗口宽度 - 中心列宽度）/2

如果窗口大小调整，您可以重新应用 JavaScript。

Answer 4

这篇文章位于 A List Apart 有一个导致 3 列布局的解决方案，该解决方案将：

• 有一个带有固定宽度侧边栏的流体中心，

• 允许中心列首先出现在源中，

• 允许任何列最高，

• 仅需要一个额外的 div 标记，并且

• 需要非常简单的 CSS，只需最少的补丁。