相信剛?cè)肭岸说男』锇閭儗κケ季趾碗p飛翼布局的名稱不會陌生撵枢，做為css布局中最經(jīng)典的布局正是初學(xué)前端布局小伙伴的挑戰(zhàn)雷恃，在我看來圣杯布局和雙飛翼布局是一回事，只是不同人對他的不同叫法而已，這說白了就是實(shí)現(xiàn)三欄布局键闺，兩邊盒子寬度固定渤昌，中間盒子寬度自適應(yīng)虽抄，也就是有些人說的固比固布局走搁，只是實(shí)現(xiàn)思想不一樣而已。這種布局也是面試中常問道的問題迈窟，因?yàn)樗饶荏w現(xiàn)你懂html結(jié)構(gòu)又能體現(xiàn)出你對div+css布局的掌握私植。接下來就具體看看實(shí)現(xiàn)過程。
圣杯布局：
html結(jié)構(gòu)：
css結(jié)構(gòu)：
思路很簡單车酣，通過浮動讓元素在一行顯示曲稼，通過外邊距和定位值來實(shí)現(xiàn)左右盒子的位置即可。
雙飛翼布局：
html結(jié)構(gòu)：
css結(jié)構(gòu)：
和圣杯布局思路差不多湖员，只是在中間區(qū)域多加了一個盒子贫悄，這樣就不用讓兩側(cè)盒子來判斷定位值了。
對于這種三欄布局除了這兩種經(jīng)典方式外這里再提供兩種方法供小伙伴們參考：
第一種：絕對定位實(shí)現(xiàn)
html結(jié)構(gòu)：
css結(jié)構(gòu)：
第二種：彈性盒模型實(shí)現(xiàn)
html結(jié)構(gòu)：
css結(jié)構(gòu)：
好了娘摔，今天關(guān)于這種常見布局的內(nèi)容就先說到這里窄坦，以上方法也各有優(yōu)缺點(diǎn)，小伙伴們可以根據(jù)代碼自己操作一下看看效果更好的理解凳寺。在工作中也會常常見到這種需求鸭津，希望這篇文章對大家有所幫助。
