CSSASSCSSASS

前面写过一篇二列右列宽度自适应布局的四种方法 。
先扩展出来“三列，左右列宽度固定，中间列宽度适应屏幕”。
采用二列布局的四种方法中的最后一种：触发haslayout法。(当然其他方法也可以用,比如把中间列中触发haslayout的zoom:1和为firefox而加overflow:hidden;替换为margin:0 auto;)

结合多列的自适应等高(padding与margin的抵消法)扩展为“三列自适应等高且中列宽度自适应布局”。

可以继续扩展，【三行中间行分三列，三列自适应等高且中列宽度自适应】的布局。

到这里，我们可以肯定这种方法相对于这种布局来说是比较简洁的。
但我不得不承认，我的这种方法是以牺牲“合理的页面顺序”为代价的。
即，我把左右列的顺序移到中间列上面来了。

考虑页面顺序的方法当然有，我们知道有一种margin-left负值的方法。
比如下面这个方法就应用到了（当然，按原作者的说法，仅供娱乐：http://bbs.blueidea.com/thread-2892121-1-1.html。不妨一看。）

呃，这个方法的牺牲比较大啊，左右两列的背景都是靠父级的border模拟的。
那么再看一下同类的比较好一点的方法吧：

相对而言，这个方法比较不错了，不过，也是有牺牲的：他多嵌套了一层div,放中间列的背景色，所以说中间列的背景色也是模拟出来的。

下面的这种方法和上面那种方法可以说各有优劣吧，全部背景色都是套层模拟的，而不是使用margin负值抵消来实现等高效果的。

据说，最完美的方法来自于In Search of the Holy Grail。
可惜不知为什么（怀疑父级的一个overflow在ie7下触发haslayout），我死活不能让他在ie7里兼容。

一般来说，一些布局只要避短就长的从以上几种方法里挑一个，大体就能搞定了。实在不行，也只有上js了。

标签： 三列, 三栏, 宽度, 布局, 自适应, 高度

这篇文章发布于 2008年10月10号，星期五，11:31，归类于 CSS2。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。