圣杯布局和双飞翼布局的作用和区别

圣杯布局和双飞翼布局解决的问题是一样的，都是两边顶宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部都是float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。

不同在于解决‘中间栏div内容不被遮挡’问题的思路不一样：

圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局

position：relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

多了1个div，少用4个css属性（圣杯布局中间div的padding-left和padding-right这2个属性，加上左右两个div用相对布局

position：relative及对应的right和left共4个属性，一共6个；而双飞翼布局div里用margin-left和margin-right共2个属性，6-2=4），感觉比圣杯布局思路更直接和简明一点。

简单说起来就是“双飞翼布局”比“圣杯布局”多创建了一个div，但不用相对布局了。

显示效果如下：

对比图：

代码如下：

圣杯布局：

    
    
    
    
    


    
header
    

      
middle
      
left
      
right
    
    
footer
  

双飞翼布局：

    
    
    
    
    


    
header
    

      
middle
      
left
      
right
    
    
footer

    
    
    
    
    


    
现有并列的三列布局结构，从左至右依次为 A, B, C, 宽度分别为180px, 600px, 180px。要求在不改变 Html 结构的情况下用CSS实现：ABC，CBA，BAC 三种布局及在CBA排列下使B宽度自适应（三列总宽度100%），不能使用针对浏览器的CSS Hack.
    

        
B
        
C
        
A