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

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

圣杯布局：

     
    
      
       center
      
    
      
       left
      
    
      
       right
      
     

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

 

双飞翼布局：

     
  
      
       inner
      
     
     
      left
     
     
      right
     

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