- 绝对定位法
左右两栏采用绝对定位，分别固定在页面的两侧，中间的主体栏用左右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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
