console
<p>第一种方法:绝对定位</p>
<div class="container1">
<div class="left1">left</div>
<div class="center1">center</div>
<div class="right1">right</div>
</div>
<p>第二种方法:浮动</p>
<div class="container2">
<div class="left2">left</div>
<div class="right2">right</div>
<div class="center2">center</div>
</div>
注:该布局要求,center必须放最后
<p>第三种方法:圣杯布局</p>
<div class="container3">
<div class="center3"><p>center</p></div>
<div class="left3">left</div>
<div class="right3">right</div>
</div>
注:该布局要求,center必须放前面
html,body{
margin:0px;
}
p{
height: 30px;margin:20px 0 0;
}
/* 第一种方法:绝对定位 */
.container1{
width:100%;
}
.left1,.right1{
height:200px;
background:red;
position:absolute;
top:50px;
}
.left1{
left:0;
width:100px;
}
.right1{
right:0;
width:120px;
}
.center1{
margin:0px 120px 2px 100px;
background:yellow;
height:200px;
}
/* 第二种方法:浮动 */
.left2,.right2{
height:200px;
background:red;
width:100px;
}
.left2{
float:left;
}
.right2{
float: right;
}
.center2{
margin:0px 100px;
background:yellow;
height:200px;
}
/* 第三种方法:圣杯布局 */
.container{
overflow:hidden;
height:200px;
padding:0 100px;
}
.left3,.right3{
height:200px;
background:red;
width:100px;
}
.left3{
float:left;
margin-left:-100%;
}
.right3{
float: left;
margin-left:-100px;
}
.center3{
background:yellow;
height:200px;
width:100%;
float:left;
}
.center3 p{
text-align:center;
}