雙飛翼佈局的原理

時間 2019-11-16

標籤雙飛佈局原理简体版

原文原文鏈接

雙飛翼佈局的起源

雙飛翼佈局介紹-始於淘寶UEDcss

雙飛翼佈局解決的問題

兩邊定寬，中間自適應的三欄佈局，中間欄要放在文檔流前面以優先渲染。其實雙飛翼佈局就是在聖盃佈局的原理上進行完善，實現相同效果的完美佈局！html

雙飛翼佈局原理

HTML代碼

<div id="content">
    <div id="main-wrap"><div id="main"></div></div>
    <div id="left"></div>
    <div id="right"></div>
</div>

CSS代碼

#main,#left,#right{ height: 200px; float: left; }
#main-wrap{ margin: 0 100px; }
#main{ width: 100%; background: pink; }
#left{ background: blue; width:100px ; margin-left: -100%; position: relative; left: 100px; }
#right{ width:100px ; margin-right: -100px; background: green; }

對比聖盃佈局和雙飛翼佈局，咱們會發現原理實際上是同樣的，都是採用了浮動 float、負邊距 negative margin、相對定位 relative position來對div的位置改變，雙飛翼佈局是在main的外層添加了一個容易，從而padding就能夠不用再最外層容器content上，而是在main-wrap上用margin實現中間部分的自適應！前端

聖盃佈局的原理git

DEMOgithub