雙飛翼佈局----利用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

其餘

個人博客，歡迎交流！

個人CSDN博客，歡迎交流！

微信小程序專欄

前端筆記專欄

微信小程序實現部分高德地圖功能的DEMO下載

微信小程序實現MUI的部分效果的DEMO下載

微信小程序實現MUI的GIT項目地址

微信小程序實例列表

前端筆記列表

遊戲列表