- 绝对定位法
左右两栏采用绝对定位，分别固定在页面的两侧，中间的主体栏用左右margin值撑开距离
Tips
左右position均为absolute，左边left=0,右边right=0,top=0,中间栏的margin-left为左边宽度，margin-right为右边宽度
.left{
width:100px;
height: 500px;
background-color: #8E8DCC;
position: absolute;
left:0
}
.right{
width: 200px;
height: 500px;
background-color: antiquewhite;
position: absolute;
right:0;
top:0
}
.main{
margin-left:100px;
margin-right:200px;
height: 500px;
background-color: #999999;
}
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
- margin负值法
中间栏要用<div>再包裹一层，并且宽度为100%，设置浮动float：left
中间栏则要设置margin值
左右栏设置浮动float:left，并且设置magin值为负,左边栏margin-left：-100%，右边栏margin-left:自身宽度
.center{
float: left;
width: 100%;
}
.main{
margin-left:100px;
margin-right:200px;
height: 500px;
background-color: #999999;
}
.left{
width:100px;
height: 500px;
background-color: #8E8DCC;
margin-left: -100%;
float:left;
}
.right{
width: 200px;
height: 500px;
background-color: antiquewhite;
margin-left:-200px;
float:left;
}
<div class="center">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
- 自身浮动法
左栏左浮动，右栏右浮动，把主体放最后
.left{
float: left;
width: 100px;
height: 500px;
background-color: #8E8DCC;
}
.right{
float: right;
width: 200px;
height: 500px;
background-color: antiquewhite;
}
.main{
height: 500px;
background-color: #999999;
}
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
