参考原文：原文
三种实现网页宽度自适应布局的方法：
1.绝对定位法：左右两栏采用绝对定位，分别国定与页面的左右两侧，中间的主体栏使用左右margin只撑开距离。
<body>
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>
</body>
<style>
#left,#right {
position:absolute;
top: 0;
width:200px;
height: 100%;
}
#left {
left: 0;
}
#right {
right: 0;
}
#main {
margin: 0 210px;
height: 100%;
}
</style>
这里左右中三个div的顺序是可以任意调整的
优点：受内部元素影响而破坏布局的概率低。
缺点：若果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。(一般情况下，除非用户显示器分辨率宽度>=1600像素，否则用户不会把浏览器缩小到1000像素以下)
2.margin负值法：淘宝双飞翼布局就是采用该方法。
<body>
<div class="main">
<div id="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
<style>
.main {
width: 100%；
height: 100%;
float: left;
}
#main {
margin: 0 210px;
height: 100%;
}
.left,.right {
width: 200px;
height: 100%;
float: left;
}
.left {
margin: -100%;
}
.right {
margin: -200px
}
</style>
该方法主体div要写在前面，左右两栏谁前谁后无所谓。
优点：三栏互相关联，有一定的抗性，布局不易受内容影响。
缺点：上手难，过多负值定位，如果出现布局的bug，排查不易。
注：当我第一次看到这个写法时很疑惑为什么设置负值左右两栏会被显示在中间体的两侧。要理解其实很简单，margin的值是相对于父元素决定的，左边栏设置-100%即一个页面的距离，所以设置了之后会显示在左侧，而右边栏设置了自身宽度的距离所以显示在右侧。
**3.自身浮动法：**左栏左浮动，右栏右浮动，主体直接放后面。
<body>
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</body>
<style>
.main {
height: 100%;
margin: 0 210px;
}
.left,.right {
width: 200px;
height:100%
}
.left {
float: left;
}
.right {
float: right;
}
</style>
优点：代码简洁直观。
缺点：使用此方法要避免clear: both属性。
549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
