圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。
效果简图如下：
1、圣杯布局
注意middle写在前面就行了，dom结构如下：
<body> <div id="hd">header</div> <div id="bd"> <div id="middle">middle</div> <div id="left">left</div> <div id="right">right</div> </div> <div id="footer">footer</div> </body>相对应的CSS内容如下：
<style> #hd{ height:50px; background: #666; text-align: center; } #bd{ /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/ padding:0 200px 0 180px; height:100px; } #middle{ float:left; width:100%;/*左栏上去到第一行*/ height:100px; background:blue; } #left{ float:left; width:180px; height:100px; margin-left:-100%; background:#0c9; /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/ position:relative; left:-180px; } #right{ float:left; width:200px; height:100px; margin-left:-200px; background:#0c9; /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/ position:relative; right:-200px; } #footer{ height:50px; background: #666; text-align: center; } </style>2、双飞翼布局
DOM代码如下：
<body> <div id="hd">header</div> <div id="middle"> <div id="inside">middle</div> </div> <div id="left">left</div> <div id="right">right</div> <div id="footer">footer</div> </body>双飞翼布局是在middle的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。
CSS代码如下：
<style> #hd{ height:50px; background: #666; text-align: center; } #middle{ float:left; width:100%;/*左栏上去到第一行*/ height:100px; background:blue; } #left{ float:left; width:180px; height:100px; margin-left:-100%; background:#0c9; } #right{ float:left; width:200px; height:100px; margin-left:-200px; background:#0c9; } /*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/ #inside{ margin:0 200px 0 180px; height:100px; } #footer{ clear:both; /*记得清楚浮动*/ height:50px; background: #666; text-align: center; } </style>
圣杯布局和双飞翼布局的理解和区别
标签：
