标签：
今天刷题的时候碰见了一道要求使用双飞翼布局的题。于是便对比了一下圣杯布局得到了点新认识。
我们都知道圣杯布局和双飞翼布局都实现了中间宽度自适应，两边定宽的效果。这样做的优势是重要的东西放在文档流前面可以优先渲染。两者又有什么差别呢？
具体来说就是设置左右两边div的margin-left为一负值并设置浮动。于是便会移动到上方的div内（也就是中间的div）与之重叠。
DOM结构：
<div class="top">top</div> <div class="bd"> <div class="main"> <div class="inner"> Main </div> </div> <div class="left">Left</div> <div class="right">Right </div> </div> <div class="bottom">bottom</div>
二者对比样式：
<style> body{padding:0;margin:0} .top,.bottom{width:100%; background: red;height:30px;clear:both;} .bd{ /*padding-left:150px;*/ /*padding-right:190px;*/ } .left{ background: blue; width:150px; float:left; margin-left:-100%; /*position: relative;*/ /*left:-150px;*/ } .main{ background: yellow; width:100%; float:left; } .right{ background: gray; width:190px; float:left; margin-left:-190px; /*position:relative;*/ /*right:-190px;*/ } .inner{ margin-left:150px; margin-right:190px; } </style>
标签：
原文地址：http://www.cnblogs.com/Kygo4/p/5459900.html
