三栏自适应布局方法

来源：互联网发布：同道伟业大数据编辑：程序博客网时间：2024/06/01 07:34

前言：本文讲述的是两边栏宽度固定位200px，中间栏宽度自适应的布局，要想三栏宽度都自适应，将固定宽度改为百分比即可；

1.绝对定位法

这或许是三种方法里最直观，最容易理解的：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。
HTML：

    <div id="" class="left">左</div>    <div id="" class="main"></div>     <div id="" class="right">右</div>

CSS:

*html, body{ margin:0;  height:100%; } .left,.right{position:absolute;width:200px;height:100 background-color:#ff6633; top:0;} .left{left:0;} .right{right:0;} .main{height:100%;  background-color:#6600ff;margin:0 210px;}

这里的左中右三个div的顺序是可以任意调整的，这与剩下的两中方法就不一样了，需要注意一下。

此方法的优点是，理解容易，上手简单，受内部元素影响而破坏布局的概率低，就是比较经得起折腾。
缺点在于：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。然而，一般情况下，除非用户显示器分辨率宽度>=1600像素，否则用户不会把浏览器缩小到1000像素以下的，所以该缺陷危害指数3.

2.自身浮动法

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

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

CSS:

 <style type="text/css">    html, body{     margin:0;  height:100%; }     .left,.riht{   width:200px;       height:100%;    background-color:#ff6633;     }    .left{ float:left;}    .main{height:100%;  background-color:#6600ff;}    .right{float:right;}  </style>

此方法的优点是：代码足够简洁与高效
不足在于：中间主体存在克星，clear:both属性。如果要使用此方法，需避免明显的clear样式。

3.margin负值法

此方法是利用float+负margin，相对比较难难理解，所以在说之间现讲一下float情况下负margin值的表现：对于设置了浮动的元素，设置 margin 为负值的时候，表现如下：

如果设置的 margin 的方向与浮动的方向相同，那么，元素会往对应的方向移动对应的距离。

比如：

.elem {    float: right;    margin-right: -100px;}

该元素则会向右移动 100px。

如果设置 margin 的方向与浮动的方向相反，则元素本身不动，元素之前或者之后的元素会向钙元素的方向移动相应的距离。

比如：

.elem {    float: right;    margin-left: -100px;}

则位于该元素左边的元素则会向右移动 100px，同时覆盖在该元素上。

示例演示一下：
HTML代码：

<body>  <div id="" class="frist">1</div>  <div id="" class="second">2</div> </body>

CSS代码：

    html,body{margin:0;}    .frist, .second{        float:left;        width:100px;height:100px;        background-color:#ff3333;    }    .second{    background-color:#9966ff;}

刚开始效果是这样的：
这里写图片描述

1.现在

.frist{margin-left:-50px;}

变成这样
这里写图片描述

2.现在

.frist{margin-right:-50px;}

效果和上图一样，但原理是 div1没动，div2元素向左移动了50px,并且覆盖了1元素，可以想象为div1将自己50px的空间让了出来。

好了，这下将最后的分栏布局：
HTML代码：

 <div id="" class="main">    <div id="" class="body"></div>  </div> <div id="" class="left">zuo</div> <div id="" class="right">YO</div>

CSS代码：

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

我的见解：此时的main left 和right全都是左浮动，因此left和right可以在main的上空。

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

本文参考张鑫旭个人网站

阅读全文

0 0