在移動端開發時，經常使用雙飛翼佈局，簡單明瞭，嗖嗖嗖的就搞定頭部；
接下來給大家奉上代碼：
html部分：
<header>
<div class="main">title</div>
<div class="left">left</div>
<div class="right">right</div>
</header>
css部分:
.main,.left,.right { float:left; height:200px; text-align: center; }
/*先讓元素浮動在同一行，並且設置元素文本居中，這樣的話main的內容就可以絕對居中顯示在父元素的最中間*/
.main { width:100%; background:#ace; }
.left { width:20%; background:#eee; margin-left:-100%; }
/*此處的margin負值100%爲main的寬度，這樣left就可以在最左邊*/
.right { width:20%; background:#ddd; margin-left:-20%; }
/*此處的margin負值100%爲right的寬度，這樣left就可以在最右邊*/
此外要是覺得margin負值寫起來木有安全感，那也可以用定位來寫，代碼如下：
header{position:relative;}
.main,.left,.right {height:200px; text-align: center; }
.main { width:100%; background:#ace; }
.left { width:20%; background:#eee; position: absolute;left: 0;top: 0; }
.right { width:20%; background:#ddd; position: absolute;right: 0;top: 0; }
ok啦，關於雙飛翼佈局就到這啦，希望對大家有所幫助；
have a nice day