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

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

1、绝对定位法

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

html结构：

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结构：

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结构：

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版本出错(这个框架好像被我无意中删了，下载提示的版本又无效，看来要使用客户端写博客，必须要重装系统了^_^)。。。