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

先回顾一下 圣杯布局的实现过程>>

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

在淘宝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>