三栏宽度自适应布局的三种方法及其优缺点

三栏宽度自适应布局方法VS

      页面自适应布局也可称为流动性布局，对于宽屏高分辨率的显示器仍然有很好的用户体验。这里谈谈我对自适应布局的一些看法和总结，主要是针对三栏布局，实现的方法有三种：绝对定位法，margin负值法以及自身浮动法。

1、绝对定位法

实现的思路：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离，并且宽度和margin值可为固定值或百分比。

html结构：

<div id="left"></div>
<div id="main"></div>
<div id="right"></div>

css代码：

html,body {
    margin: 0; 
    height:100%;
}
#left, #right {
    position: absolute; 
    top: 0; 
    width: 200px;
    height: 100%;
    background: #ccc;
}
#left {left: 0;}
#right {right:0;}
#main {
    margin: 0 210px; 
    background: #666; 
    height: 100%;
}

注：这里的左中右三个div的顺序是可以任意调整的。

此方法的优点：代码量少，容易理解，不容易受内部元素影响而破坏布局。
缺点：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。

 

2、margin负值法

实现思路：首先，中间的主体部分要使用双层标签。即外层div宽度100%显示，并且浮动（本例左浮动），内层div为真正的主体内容，含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%相对于浏览器，所以这里的-100%margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200像素。

html结构：

<div id="main">
    <div class="content"></div>
</div>
<div id="left"></div>
<div id="right"></div>

css代码：

html, body {
    margin: 0; 
    height: 100%;
}
#main {
    width: 100%; 
    height: 100%; 
    float: left;
}
#main .content {
    margin: 0 210px; 
    background: #666; 
    height: 100%;
}
#left, #right {
    width: 200px; 
    height: 100%; 
    float: left; 
    background: #ccc;
}
#left {margin-left: -100%;}
#right {margin-left: -200px;}

注：关于div的顺序，无论是左浮动还是右浮动，先是主体部分div，这是肯定的，至于左右两栏谁先谁后，都无所谓，在IE6，Firefox，以及chrome浏览器下测试，表现都一致。

此方法的优点：三栏相互关联，实现真正意义上的自适应，布局不易受内部影响。
缺点：相对比较难理解些，代码相对复杂。出现百分比宽度，过多的负值定位，如果出现布局的bug，排查不易。

 

3、自身浮动法

此方法代码最简单。应用了标签浮动跟随的特性。左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应。

html结构：

<div id="left"></div>
<div id="right"></div>
<div id="main"></div>

css代码：

html,body {
    margin: 0; 
    height: 100%;
}
#main {
    height: 100%; 
    margin: 0 210px; 
    background: #666;
}
#left, #right {
    width: 200px; 
    height: 100%; 
    background: #ccc;
}
#left {float: left;}
#right {float: right;}

注：这里三个div标签的顺序的关键是要把主体部分div放在最后，左右两栏div顺序可任意排列。

此方法的优点：代码简洁、高效。
缺点：中间主体部分不能使用clear:both属性，否则主体部分会跳到左右边栏的下面，结构就出现了错乱。

 

结语：这只是我平时收集和总结的一些宽度自适应布局方法，当然还有其他的实现方法；第一次玩博客，不知怎么写，链接页面提供不了，无法提供demo，有兴趣的可自行测试，另外悲催的是客户端安装不了，说.net framework版本出错(这个框架好像被我无意中删了，下载提示的版本又无效，看来要使用客户端写博客，必须要重装系统了^_^)。。。