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

两者功能相同，都是实现两侧定宽，中间自适应宽度的三栏布局

一. 圣杯布局：

1.DOM结构

    
header
    

        
center
        
left
        
right
    
    
footer

整个DOM结构中，主体部分是由 container 包裹着 center,left ,right 三列，其中center 定义在最前面

2.css代码

1. 为左右预留出相应的空间：假设左侧宽度为200px，右侧宽度为150px

#container{
    padding:0px 150px 0px 200px
}

（图片仅是参考）

2. 分别为三列设置宽度和浮动，同时对footer设置清除浮动

 .container .column{
           float:left;/*设置浮动*/
       }
       #center{
           width:100%;
           background-color:green;
       }
       #left{
            width:200px;
           background-color:red;
       }
       #right{
           width:150px;
           background-color:blue;
       }
       .footer{
           clear:both; /*清除浮动*/
       }

根据浮动的特性，由于center的宽度为100%,即占据了第一行的所有空间，所以left和right被挤到了第二行

3. 将 left 放置在预留位置 (使用负外边距和相对定位）

 #left{
           margin-left:-100%;/*负外边距*/
           position: relative; /*使用相对定位*/
           right:200px;
           width:200px;
           background-color:red;
       }

4. 将 right 放置在预留位置（使用负外边距）

 #right{
           margin-right:-150px;/*负外边距*/
           width:150px;
           background-color:blue;
       }

得到得的最终效果图

5. 最后为了保证布局效果正常显示，需要设置 页面的最小宽度

 body{
           min-width:550px;
       }

3.最终代码：

    
header
    

        
center
        
left
        
right
    
    
footer

二. 双飞翼布局

1.DOM结构

   
header
   

       
main
   
   
left
   
right
   
footer

双飞翼布局的DOM结构与圣杯布局的区别是用 container仅裹着 center, column类从center移至container

2.css代码：

1. 为各列设置宽度和浮动，并为左右两列预留空间，为footer设置清除浮动

.column{
            float:left;/*设置浮动*/
        }
        #container{
            width:100%;
        }
        #center{
            margin:0px 150px 0px 200px;/*为左右预留相应宽度*/
            background-color:green;
        }
        #left{
            width:200px; 
            background-color:red;
        }
        #right{
            width:150px;
            background-color:blue;
        }
        .footer{
            clear:both;/*清除浮动*/
        }

2. 将left放置到预留位置（负外边距）

#left{
            margin-left:-100%;
            width:200px; 
            background-color:red;
        }

3. 将right放置到预留位置（负外边距）

#right{
            margin-left:-150px;
            width:150px;
            background-color:blue;
        }

最终效果

3.全部代码

 


   
header
   

       
main
   
   
left
   
right
   
footer