双飞翼

在Html布局中，双飞翼布局是淘宝前端团队开发的一种布局，由于两侧的盒子等宽等长，像鸟的两翼，因此被称为双飞翼。

双飞翼布局是很经典的布局方式。如果对web前端感兴趣，一定要了解一下。

1.两边固定，等长等宽 2.中间自适应 3.所有盒子高度相同

//HTML：
   <div class="box">

       <div class="main">
            <div class="centent">content</div>
       </div>

       <div class="left">left</div>
       <div class="right">right</div>

   </div>

//CSS

.box {
    width: 80%;
    margin: 0 auto;
}

.left {
    float: left;
    height: 500px;
    width: 100px;
    background: cadetblue;
    margin-left: -100%;
}

.right {
    float: right;
    height: 500px;
    width: 100px;
    background: cadetblue;
    margin-left: -100%;
}

.centent {
    height: 500px;
    background: cornflowerblue;
    margin: 0 110px;
}

.main {
    width: 100%;
    float: left;
    background: lightblue;
}

最终效果：