双飞翼

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

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

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

（1）HTML：

<div class="box">

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

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

        </div>

（2）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;
            }

（3）最终效果：