在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）最终效果：