1.浮动法,左列左浮动,右列右浮动,插入主体。中间内容#main必须要在最后加入,#main占一行会影响后面的浮动元素
html,body{
margin: 0;
height: 100%;
}
#left{
width: 120px;
float: left;
height: 100%;
background-color: grey;
}
#right{
width: 200px;
float:right;
height: 100%;
background-color: grey;
}
#main{
background-color: skyblue;
margin: 0 220px 0 140px;
height:100%;
}
<div id="left"></div>
<div id="right"></div>
<div id="main">主体</div>
2.margin负值法,每个盒子都向一边浮动,通过负margin把盒子拉到左侧,先放中间的盒子
body,html{
height: 100%;
margin: 0;
}
#main{
float: left;
width: 100%;
height: 100%;
}
#content{
margin: 0 220px 0 140px;
background-color: skyblue;
height: 100%;
}
#left{
float: left;
width: 120px;
height: 100%;
margin-left: -100%;
background-color: grey;
}
#right{
float: left;
width: 200px;
height: 100%;
margin-left: -200px;
background-color: grey;
}
<div id="main">
<div id="content"></div>//留空位给左右两列
</div>
<div id="left"></div>
<div id="right"></div>
3.绝对定位,左右两列绝对定位,中间用margin撑开距离。最容易理解
4.flex布局,最简单
body,html{
height: 100%;
margin: 0;
}
#box{
height: 100%;
width: 100%;
display: flex;
}
#left{
width: 120px;
background-color: grey;
height: 100%;
}
#main{
flex:1;
background-color: skyblue;
height: 100%;
margin:0 20px;
}
#right{
width: 200px;
background-color: grey;
height: 100%;
}