CSS - 双飞翼布局

一、圣杯布局

• 它可以由现有的技术来实现，所以找到一种最优的实现方法就好像寻找难以捉摸的圣杯一样。
• 双飞翼布局是一种灵活的布局，始于淘宝UED。如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。是对圣杯布局的一种改良。
• 代码：

    
    
    



    我是头


    

            我是中间
    
    

        我是左 
    
    

        我是右
    


    版权

- 效果图

布局3.png

• 圣杯布局的问题：
  • 因为我们外部使用的 div 的 width是设置为100%的，如果不是100%的给其加上 padding 的话就会将整个宽度撑大影响到其他界面，而且如果使用这种方式的话左右 div 必须设置为 relative，过于局限。

二、双飞翼布局

• 需求 左中右块在同一行
  • 传统布局的代码：

    
    
    



    我是头


    
我是左我是左我是左
    
我是右
        
我是中间


    版权

- 效果图：

布局1.png

- 问题： 这个时候通过对左 div 、右div 分别使用float属性，使其脱离文档流的方法让三者排列在了一排，但是这个时候会出现问题，也就是这个时候其实左div 和右div 只是盖住了中间的div，被挤压的只是中间div的文字，中间div的长度并没有改变，如果我们将左div 和右 div 的透明度改小就能发现这个bug，如图：

布局2.png

• 双飞翼布局：

    
    
    


    

        我是头
    
    

        

            
我是中间
        
        

            
我是左
        
        

            
我是右
        
    
    

        版权
    

- 效果图

布局4.png