雙飛翼

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