注：本文系筆者蒐集整理資料寫的自用三列布局模板
優點
缺點
備註
聖杯1.有效利用外層包裹結構
2.中間部分優先渲染
1.**量最多
2.因外包裹涉及到padding，所以要注意box-sizing:border-box時對整體寬度造成的印象
雖**量較多，但是較雙飛翼結構簡單。在實際開發當中考慮到子元素的絕對定位問題，通常會給外包裹新增position:relative。因此，這多餘出的**量也就不算什麼了。
雙飛翼1.不依賴外層包裹
2.中間部分優先渲染
main需要再巢狀一層
左右結構比較清晰，較容易理解。但是由於中間多了一層子元素，使得結構複雜了一層。可視情況而定。
簡易不依賴外層包裹
中間部分最後渲染
因為不需要優先渲染中間部分，所以限制就少，因此也是三者中**量最少的。如無特別需要，平時開發利用此布局即可。
html：
css:
.grail-container
.grail-main
.grail-left
.grail-right
html：
css:
.wing-container {}
.wing-main
.wing-submain
.wing-left
.wing-right
html：
css:
.diy-container{}
.diy-left
.diy-main
.diy-right
三列布局之聖杯布局和雙飛翼布局
簡單理解就是，頁面有三個等高的模組，左右兩個模組寬高固定，中間模組的寬度隨視口的變化而變化。注意點 為了保證中間模組正常顯示，需設定視口最小寬度 要保證中間列優先載入 所以不能單純用浮動解決 在整體布局中，盡量少用絕對定位 html container center center div left ...
三列布局（聖杯布局和雙飛翼布局）
要求 1.兩邊固定 當中自適應 2.當中列要完整顯示 3.當中列要優先載入 header header content class clearfix middle middle middle middle middle middle middle middle middle left left ri...
聖杯 雙飛翼布局
自己雖然經歷著web應用的開發,總是拿著別人寫好的css來引用到自己的專案當中,甚至一度迷上了bootstrap,發現有了它自己可以不用在寫程式邏輯的同時還要去修改別人的css.當然開發的應用大多數是企業內部應用,個別網際網路的程式.2016偶然的機會接觸到前端這個概念,發現自己還是挺喜歡前端的這些...