双飞翼布局和圣杯布局的对比

在不增长额外标签的状况下，圣杯布局已经很是完美，圣杯布局使用了相对定位，之后布局是有局限性的，并且宽度控制要改的地方也多，那么有没其余方法更加简洁方便呢？

在淘宝UED探讨下，增长多一个div就能够不用相对布局了，只用到了浮动和负边距，这就是咱们所说的双飞翼布局。

DOM结构：main内层增长了一个div

<div class="header">Header</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="footer">Footer</div>

样式：去掉了左右栏的相对定位，去掉包裹层padding，以中间栏新增div的margin代替

  <style> body{padding:0;margin:0} .header,.footer{width:100%; background: #666;height:30px;clear:both;} .bd{ /*padding-left:150px;*/ /*padding-right:190px;*/ } .left{ background: #E79F6D; width:150px; float:left; margin-left:-100%; /*position: relative;*/ /*left:-150px;*/ } .main{ background: #D6D6D6; width:100%; float:left; } .right{ background: #77BBDD; width:190px; float:left; margin-left:-190px; /*position:relative;*/ /*right:-190px;*/ } .inner{ margin-left:150px; margin-right:190px; } </style>

From:http://www.cnblogs.com/tinyphp/p/4743674.html