CSSASSCSSASS

三列布局，中间列宽度固定，左右列自适应宽。
在蓝色理想上的一个提问。
这种布局一般来说不大会用上。
（而相对比较常见的是这种布局：左右列固定高度，中间列自适应宽度。
之前写过一种此结构的扩展结构：三列自适应等高且中列宽度自适应布局）
用css来实现这种不常见的结构着实也不太容易（或许也是这种结构不流行的一个原因吧）。
实现主要难点在于左右列的宽度计算，假设中间列的宽度为Y,那么左右列的宽度就应该是(100%-Y)/2(左右列等宽情况下)。但是CSS又不支持这种算式计算（当然，ie下有expression，但是这种不标准的东西我们一向是不屑的）。
历数css中，唯一有减法效果的也就margin边距这么一种属性。
所以，我们找到了我们的独木桥——margin。

上下级包含的结构中，如果上级元素（block类型）固定宽度为X，下级元素不定宽，而设置属性margin:50px;那么下级元素的宽度就等于X-2×50px。

如果X是一个百分比的相对数值，那么得到的下级结构的宽度也将是一个相对值。而我们需要的自适应宽正是这么一个相对值。

看代码：

方法中还有个关键的东西，就是padding,margin正负抵消。用来实现左右列的定位（注意，此时宽度并没有达到要求，仍然是50%）。而left:50%,margin-left:-200px两者抵消是实现中间列的居中定位。

这里的效果是左右列等宽，看准了代码中200px,400px的关系，我们也可以实现左右不等宽。

现在，考虑下扩展到到三列自适应等高。
我们实现等高的方法一般都是用padding,margin正负抵消法。而这种方法就与.center中定的属性position:absolute;就产生冲突了。
其实使用absolute定位是我用来避免ie6下三列一行这种布局的宽度溢出的。不用position而用margin定位也是可以的（只是，这样的话，左右不等宽的效果似乎就无法达到了）。
先试试：

代码，为了解决上面提到的在ie6下的问题，而使用了hack：height:400px;_height:393px;（如果对宽度有精确的要求的话，可以考虑统一设为393px好了，因为400px的话在ie7下面也不是很稳定）。

标签： 三列, 三栏, 布局, 等高

这篇文章发布于 2009年01月18号，星期天，17:48，归类于 CSS2。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。