双飞翼布局 移动端header常用布局

在移动端开发时，经常使用双飞翼布局，简单明了，嗖嗖嗖的就搞定头部；

接下来给大家奉上代码：

  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