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

来源：互联网发布：拉拉菲尔族捏脸数据编辑：程序博客网时间：2024/05/13 18:08

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

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

0 0