在移动端开发时，经常使用双飞翼布局，简单明了，嗖嗖嗖的就搞定头部；
接下来给大家奉上代码：
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
