1、两边固定，中间自适应
1.1使用position:absolute和margin，这或许是三种方法里最直观，最容易理解的：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
html,body{ margin: 0px;
width: 100%;
height: 100%;
}
.left{
width: 200px;
position: absolute;
background-color: blue;
left:0;
height: 100%
}
.right{
width: 200px;
position: absolute;
background-color: blue;
right: 0;
height: 100%;
}
.center{
margin:0 200;//由边始终空出200px;
background:red;
height:100%;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>1.2使用margin负值法。这种方法是在实际的网站中应用的最多的，我个人感觉多少有些跟风的嫌疑。此方法很难用一句话概括。首先，中间的主体要使用双层标签。外层div宽度100%显示，并且浮动（本例左浮动，下面所述依次为基础），内层div为真正的主体内容，含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100%margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200像素。
<div id = "wrap">
<div id = "center"></div>
</div>
<div id = "left_margin"></div>
<div id = "right_margin"></div>
#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }
#left_margin {margin-left: -100%; background-color: lightpink}
#right_margin{margin-left: -200px;}1.3 自身浮动。自身浮动法的原理就是使用对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
html,body{ margin: 0px;
width: 100%;
height: 100%;
}
.left
,.right{
width:200px;
height: 100%;
background-color: blue;
}
.left{
float:left;
}
.right{
float: right;
}
.center{
margin: 0 200;
height: 100%;
background-color: red;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>
1667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
