SOURCE

<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;
}