圣杯布局和双飞翼布局

整理自撩课学院（www.itlike.com）

一、概述

1、都是三列布局
2、左右两栏固定宽度，中间部分自适应
3、中间部分要在浏览器中优先展示渲染

二、圣杯布局

1、步骤

1.1 设置父元素container的位置
1.2 将主体部分的三个子元素都设置左浮动
1.3 设置main宽度为 width:100% ,让其单独占满一行
1.4 设置 left（左元素） 和 right（右元素） 负的外边距
1.5 使用相对定位移动 left 和 right 到对应的位置

2、效果如下

圣杯布局.png

3、代码如下

    
    
    
    
    



    
    

        
        
中间栏
        
左边栏
        
右边栏
    

三、双飞翼布局

1、步骤

1.1 左右两个div浮动，中间的div放在上面
1.2 通过margin-left 调整到一行
1.3 中间div添加一个子节点，设置margin调整位置

2、效果如下

双飞翼布局.png

代码如下：

    
    
    
    
    



    
    

        

            
            
中间栏
        
        
左边栏
        
右边栏