首先解释一下什么是“三栏布局”：顾名思义，三栏布局就是在网页上以平铺方式展现的左中右三列布局，其特点在于，左右两列可固定在网页左右两侧，中间一列永远居中，且当网页宽度大于左右两列宽度之和时，中间一列可随网页整体宽度的变化而变化。无论在自适应网页或响应式网页中，三栏布局都是最为常见和基础的布局方式之一。
目前为止，三栏布局的常用写法有三个：绝对定位法，外距负值法以及自身浮动法。
为方便演示，限定示例的布局结构：左中右三栏布局，左右两栏宽度固定为200px，中间栏宽度自适应。
1.绝对定位法：
这是三种方法里最直观，最容易理解的：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。
这个方法中，左中右三个div的顺序可以任意调整，而下面两个方法则不可以。
优点：理解容易，上手简单，受内部元素影响而破坏布局的概率低。
缺点：若中间栏含有最小宽度限制，或含有固定宽度的内部元素，当浏览器宽度小到一定程度，会发生布局层重叠。当用户设备为宽屏设备时，用户通常不会把浏览器缩小到1000px及以下。
2.外距负值法：
这种方法在实际应用次数最多。中间主体使用双层标签。外层div宽度100%显示，并且浮动（本例左浮动，下面所述依次为基础），内层div为真正的主体内容，含有左右210px的margin值。左右两栏都采用margin负值定位，左栏左浮动，margin-left为-100%（-100%相对于其父元素<body></body>的宽度而言）；右侧栏也是左浮动，其margin-left为-200px（-200px相对于其本身的宽度而言）。
注意：几个div的顺序，无论是左浮动还是右浮动，主体部分div的书写位置必须固定，左右两栏则无必要规定，通常先左后右就好。
优点：三栏相互关联，真正意义上的自适应，有一定的抗性——布局不易受内部影响。
缺点：较难理解，上手不易，代码相对复杂。出现百分比宽度，过多负值定位，若在布局上出现bug，排查不易。
3.自身浮动法：
此方法代码最简单。应用了标签浮动跟随的特性。左栏左浮动，右栏右浮动，主体直接放后面，就实现自适应。
注意：主体div放在最后，左右两栏div顺序任意。
优点：代码足够简洁与高效。
缺点：若使用此方法，中间主体需避免明显的clear样式（clear:both）。
4.扩展——上下固定、中间自适应的页面布局方式（position:absolute）：
用到的情况不多，较为常见还是顶部div固定定位（position:fixed;），但原理类似。
最后说一句，以上代码都不用记，只要保存链接，用到之时直接CV一下就好~
扫一扫
1669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
