聖杯佈局和雙飛翼佈局主要用來解決以下問題： 1.三列佈局，兩側定寬，中間自適應。2.中間欄在瀏覽器中優先載入渲染。 解決思路： 首先把中間的div寫到前面，然後左側，然後右側。這樣就解決了第二個問題，中間的div優先渲染。 但是這樣會存在一個問題，寫到前面的也會顯示在前面。 為瞭解決這個問題，我們讓 ...
聖杯佈局和雙飛翼佈局主要用來解決以下問題：
1.三列佈局，兩側定寬，中間自適應。2.中間欄在瀏覽器中優先載入渲染。
解決思路：
首先把中間的div寫到前面，然後左側，然後右側。這樣就解決了第二個問題，中間的div優先渲染。
但是這樣會存在一個問題，寫到前面的也會顯示在前面。
為瞭解決這個問題，我們讓這三列都浮動起來。然後設置中間列寬度為100%。
此時中間列在第一行，左右都在第二行。此時只需要將左列移動到中間的左邊，右列移動到中間的右邊。我們給左右加一個固定寬度，比如150px。
然後給左列加一個負邊距，margin-left：-100%；右列加一個負邊距margin-left：-150px；
此時可以看到三列佈局已經形成。但是問題在於，中間div的內容被擋住了。在解決這個問題上，聖杯佈局和雙飛翼佈局開始出現不同的思路。
聖杯佈局首先給三列div外面套上一個div，我們可以使用語義化標簽article。將article設置了左右padding-left和padding-right後，將左右兩個div用相對佈局position: relative。此時可以看到三列都向中間縮進了。然後再分別給左右兩列增加right和left的負值，就可以達到目的了。
代碼如下：
聖杯佈局html代碼：
<body> <article> <div class="main"> 我是中間 </div> <div class="left"> 我是左 </div> <div class="right"> 我是右 </div> </article> </body>
聖杯佈局css代碼： *{ margin: 0; padding: 0; } article{ padding-left:150px; padding-right:150px; } .main{ background-color: lightblue; width:100%; } .left{ background-color: yellowgreen; width:150px; margin-left:-100%; position: relative; /*left:-150px;*/ } .right{ background-color: pink; width:150px; margin-left:-150px; position: relative; /*right:-150px;*/ } .main,.left,.right{ float: left; }
雙飛翼佈局則是在中間div內部創建子div用於放置內容，在該子div里用margin-left和margin-right為左右兩欄div留出位置。
代碼如下：
雙飛翼佈局html代碼： <body> <div class="main"> <div class="inside"> 我是中間 </div> </div> <div class="left"> 我是左 </div> <div class="right"> 我是右 </div> </body>
雙飛翼佈局css代碼： *{ margin: 0; padding: 0; } .main{ background-color: lightblue; width:100%; } .inside{ margin-left:150px; margin-right:150px; } .left{ background-color: yellowgreen; width:150px; margin-left:-100%; } .right{ background-color: pink; width:150px; margin-left:-150px; } .main,.left,.right{ float: left; }
接下來如果我們想讓三列等高，可以給三列分別增加屬性padding-bottom: 9999px;margin-bottom: -9999px;來將三列拉到無限長。再給三列外面的article標簽加上overflow: hidden;屬性就行了。
Ending。
