css佈局-雙飛翼佈局

 

<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>

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

增長多一個div就能夠不用相對佈局了，只用到了浮動和負邊距，這就是雙飛翼佈局。

DOM結構：main內層增長了一個div