圣杯布局跟双飞翼布局

朋友去面试遇到了一道面试题，关于圣杯布局跟双飞翼布局，一直孤陋寡闻，赶紧记录一下。

顾名思义，这种布局就是左右块固定，中间块随窗口变化。

圣杯布局：

<div class="wrap">
    <div class="center">center</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

.wrap{
  padding:0 200px 0 300px;  
}
.center{
  width:100%;
  position:relative;
  float:left;
  background:#fea331;
}
.left{
  position:relative;
  width:300px;
  float:left;
  margin-left:-100%;
  right:300px;
  background:#fed442;
}
.right{
  position:relative;
  width:200px;
  float:left;
  background:#fec221;
  margin-right: -300px;
}

 

双飞翼布局：

<div class="center">
  <div class="inner">inner</div>
</div>
<div class="left">left</div>
<div class="right">right</div>

.center{
  width:100%;
  float:left;  
}
.inner{
  margin:0 200px 0 300px;
  background:#fea331;  
}
.left{
  width:300px;
  margin-left:-100%;
  float:left;  
  background:#fec251;
}
.right{
  width:200px;
  margin-left:-200px;
  float:left;
  background:#fed243;
}