三列布局
阿新 • • 發佈：2017-07-31
當前 可用 F12 log 地址 absolut rip pad title
中間三列布局想要的效果如圖
上、下為頭部和底部，中間分成3列，左右兩列為固定寬度，中間的寬度隨著瀏覽器窗口變化而變化
按下面三個步驟順序寫這個布局，最後會有一個完整的代碼
1. 基本的布局結構（html代碼）
要把middle部分調整到left上，因為一般middle比較重要，所以讓它先進行渲染加載
<header>頭部</header> <article> <div class="middle">中間</div> <div class="left">左邊</div> <div class="right">右邊</div> </article> <footer>底部</footer>
2. 設置尺寸、背景顏色
3. 調整布局位置：4種不同的方案
關鍵點：
- 為了讓left可以回到middle的左側，需要讓它們脫離文檔流，以便重新布局
- 為了讓幾個div不會發生垂直方向的重疊，需要利用margin、padding等來預留空間
- 當然，用flex彈性盒子就不用考慮上面問題~
| 實現方法 | 涉及到的重要屬性設置 | |||
| 聖杯布局 | float: left | postion: relative | right/left: -50px | 負margin |
| 雙飛翼布局 |
float: left |
middle放在一個div中， padding+box-sizing或margin |
||
| 用absolute實現 | position: absolute |
top, left, right: 0; |
正margin值 | |
| 用flex實現 | display: flex | order: 2/1/3 | ||
源碼
<!DOCTYPE html> <html> <head> <title>test</title> <meta charset="utf-8"> <scriptView Codesrc="./custom.modernizr.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; } #grail, #wing, #flex, #absolute{ width: 100%; height: 300px; } #grail header{ width: 100%; height: 20%; background-color: grey; } #grail article{ height: 60%; /*這個不用設置寬度*/ padding: 0 50px 0 50px; position: relative; } #grail article .middle{ height: 100%; width: 100%; background-color: green; float: left; } #grail article .left{ width: 50px; height: 80%; background-color: red; float: left; margin-left: -100%; position: relative; left: -50px; } #grail article .right{ width: 50px; height: 80%; background-color: blue; float: left; margin-left: -50px; position: relative; right: -50px; } #grail footer{ width: 100%; height: 20%; background-color: gray; } #wing header{ width: 100%; height: 20%; background-color: gray; } #wing article{ width: 100%; height: 60%; } #wing .middle0{ height: 100%; width: 100%; float: left; /*用padding的方法給兩側留出位置 需要設置box-sizing，因為默認設置的width是內容，padding會讓盒子向外擴展，並不能滿足要求*/ /*padding: 0 50px 0 50px; box-sizing: border-box;*/ } #wing .middle0 .middle{ height: 100%; background-color: green; /*用margin的方法給兩側留出空間*/ margin: 0 50px 0 50px; } #wing .left{ width: 50px; height: 80%; background-color: red; float: left; margin-left: -100%; } #wing .right{ width: 50px; height: 80%; background-color: blue; float: left; margin-left: -50px; } #wing footer{ width: 100%; height: 20%; background-color: gray; } #flex header{ width: 100%; height: 20%; background-color: gray; } #flex article{ display: flex; width: 100%; height: 60%; } #flex .middle{ order: 2;/*設置子元素的排列位置*/ background-color: green; width: 100%; } #flex .left{ order: 1; background-color: red; width: 50px;/*不設寬度，由內容撐開*/ /*不設置高度默認為充滿整個父元素高*/ height: 80%; } #flex .right{ order: 3; background-color: blue; width: 50px; height: 80%; } #flex footer{ width: 100%; height: 20%; background-color: gray; } #absolute header{ width: 100%; height: 20%; background-color: gray; } #absolute article{ width: 100%; height: 60%; position: relative; } #absolute .middle{ background-color: green; /*width: 100%;*/ height: 100%; /*兩側 position 設置為absolut，脫離文檔流*/ /*當前元素的兩側就變成了article邊框*/ margin-left: 50px; margin-right: 50px; } #absolute .left{ background-color: red; width: 50px;/*不設寬度，由內容撐開*/ /*不設置高度默認為充滿整個父元素高*/ height: 80%; position: absolute; top: 0; left: 0; } #absolute .right{ background-color: blue; width: 50px; height: 80%; position: absolute; right: 0; top: 0; } #absolute footer{ width: 100%; height: 20%; background-color: gray; } </style> </head> <body> <div id="grail"> <header>聖杯布局</header> <article> <div class="middle">中間</div> <div class="left">左邊</div> <div class="right">右邊</div> </article> <footer>底部</footer> </div> <div id="wing"> <header>雙飛翼布局</header> <article> <div class="middle0"> <div class="middle">中間</div></div> <div class="left">左邊</div> <div class="right">右邊</div> </article> <footer>底部</footer> </div> <div id="flex"> <header>用flex來實現三列布局</header> <article> <div class="middle">中間</div> <div class="left">左邊</div> <div class="right">右邊</div> </article> <footer>底部</footer> </div> <div id="inlineblock"> <header>用absolute來實現三列布局</header> <article> <div class="middle">中間</div> <div class="left">左邊</div> <div class="right">右邊</div> </article> <footer>底部</footer> </div> </body> </html>
遇到兩個ie的問題
1. 怎麽模擬低版本的ie
F12—訪真—文檔模式—10、9、8...代表了版本號
2. 解決低版本ie中不能使用h5標簽，如header、article、footer等
在script中引用一個js，鏈接地址：http://haiqiancun.com/file//demo/custom.modernizr.js
flex布局在低版本ie中不可用~
參考
網上有不少聖杯布局、雙飛翼布局相關的內容。後面兩個應該也有，沒有認真找過，寫前兩個的時候自己再考慮出來的
三列布局