圣杯和双飞翼布局的区别

圣杯和双飞翼布局都是实现三列布局，中间自适应，左右分栏固定宽度的布局。两者都是通过浮动和margin的负值来布局的，其主要区别是圣杯使用相对定位来固定左右分栏，双飞翼将中间的内容用div包裹，左右分栏通过浮动来定位。

圣杯代码网站

HTML代码如下（为方便阅读和理解，我已将不重要的内容删去）：

	
header

	
中间内容
  这里需要注意的是先编写中间栏

	
左侧分栏

	
右侧分栏

	
Tfooter

CSS代码：

		body {
			margin: 0;
			padding-left: 200px;    
			padding-right: 190px;   
			min-width: 240px;      
		}首先设置body元素，左右内边距用来放左右侧栏，最小宽度用来保证中间自适应区域的宽度

		#header, #footer {
			margin-left: -200px;    
			margin-right: -190px;  
		}实现相同高度，具体不是很了解，后期会补充

		.column {
			position: relative;
			float: left;
		}对左中右三栏实现相对定位和左浮动

		#center {
			padding: 0 20px;
			width: 100%;
		}中间栏的左右设置内边距，避免和左右侧栏重叠。设置自适应宽度

		#left {
			width: 180px;           
			padding: 0 10px;        
			right: 240px;           
			margin-left: -100%;
		}左侧栏宽度，内边距，margin-left通过向左缩进中间栏的宽度，使左分栏和中间栏在同一行（原本由于浮动的先后性，第一行被中间栏占满，左右分栏在第二行呈现）然后通过相对定位，移动自身宽度＋自身内边距＋中间栏内边距到达指定位置）

		#right {
			width: 130px;          
			padding: 0 10px;        
			margin-right: -100%;
		}同理margin-right向左缩进中间栏的宽度，出现在同一行，但由于位置在中间栏右边，故不用相对定位。

		#footer {
			clear: both;
		}清除浮动

双飞翼代码网站

HTML代码如下：

  
            
  
                
Main
  
            
  
            
Left
  
            
Right
  
 
  

CSS代码：

        .left{  
            background: #E79F6D;  
            width:150px;  
            float:left;  
            margin-left: -100%;  
        }  通过margin-left实现与中间栏同行
        .main{  
            background: #D6D6D6;  
            width:100%;  
            float:left;   
        }  这里设置了包裹中间栏的div 可以理解为整个页面的背景
        .mc {  
            margin-left: 150px;  margin-right:190px
        }  设置中间栏的左右内边距来实现与左右栏的分离
        .right{  
            background: #77BBDD;  
            width:190px;  
            float:left;  
            margin-right: -190px;  
        }  通过mrgin-right向左缩进自身宽度，与中间栏呈现在同一行