雙飛翼布局----利用float和margin實作雙飛翼布局

雙飛翼布局實作兩邊定寬，中間自适應的三欄布局，中間欄要放在文檔流前面以優先渲染。

這裡對布局進行改進，會将中間欄放到兩邊定寬後渲染！

HTML代碼

<div id="main-content">
    <div id="main-left">left容器</div>
    <div id="main-right">right容器</div>
    <div id="main-center">center容器</div>
</div>           

複制

CSS代碼

#main-left,#main-right,#main-center{
    height: 200px;
    color: #fff;
    box-sizing: border-box;
    padding: 10px;
}
#main-left{
    float: left;
    background: blue;
    width: 100px;
}
#main-right{
    float: right;
    background: green;
    width: 100px;
}
#main-center{
    margin: 0 100px;
    background: pink;
}           

複制

改進原理，就是根據浮動(float)會脫離文檔流，先将左右兩邊的固定進行左右浮動，然後将center進行margin-left和margin-right居中就好！

雙飛翼布局的原理

聖杯布局的原理

DEMO