圣杯布局、雙飛翼

圣杯布局、雙飛翼布局是經典的三欄式布局，都是兩邊寬度固定，中間寬度自適應，在HTML結構上中間欄在最前面保證了最先渲染，兩種布局的實作方法前半部分相同，后半部分的實作各有利弊，下面會簡單介紹兩者的區別，

原始碼

圣杯布局 代碼、demo 

雙飛翼布局 代碼、demo

圣杯布局

• 兩邊固定、中間自適應
• 中間最先渲染
• 三列等高布局

根據如上面的需求很快寫下如下html結構

 1 <header>我是頭部</header>
 2 <main class="clearFloat">
 3   <div class="middle">middle
 4     <p>middlemiddle</p>                     <p>middlemiddle</p>     
 5     <p>middlemiddle</p>
 6     <p>middlemiddle</p>
 7     <p>middlemiddle</p>
 8   </div>
 9   <div class="left">left</div>
10   <div class="right">right</div>
11 </main>
12 <footer>我是底部</footer>

css 思路

• 布局：有頭，有尾，有內容，middle要放在main的最前部分，然后是left，reight，
• 浮動讓三個div在一行，出現高度塌陷，clearFloat 清浮動，
• middle 寬度設為100%占滿空間，三個div按照float 依次排列，
• left 要放到main的左邊，float 是依次排列，位置不夠換行顯示，所以需要設定margin-left: -100%,因為margin的百分比是相對與父元素，所以需要整整一行的寬度，
• right 要放到main的右邊，同理需要設定margin-right的值為負的right的寬，
• middle 的內容被left、right存在重疊未完全顯示，所以我們需要設定父容器main 的padding，即可以理解為中間欄給左右兩邊的留位置出來，
• 上面middle的內容已經可以正常顯示出內容，但是left 還是跟middle 存在重疊，left沒有到最左邊，所以用定位向左移動left的寬度，

 1 * {
 2   padding: 0;
 3   margin: 0;
 4 }
 5 body {
 6  box-sizing: border-box;
 7 }
 8 
 9 header,footer {
10   font-size:14px;
11   height: 50px;
12   line-height:50px;
13   background-color:#ccc;
14   text-align:center;
15 }
16 main {
17   padding: 0 150px 20px 200px;
18   overflow: hidden;
19 }
20 main > div {
21   float: left;
22   text-align:center;
23   padding-top:20px;
24   padding-bottom: 10000px; // 實作等高
25   margin-bottom: -10000px;// 實作等高
26 }
27 .clearFloat:after{
28     content: "";
29     display: block;
30     clear: both;
31     visibility: hidden;
32     height: 0;
33 }
34 .clearFloat{
35     zoom: 1;
36 }
37 .middle {
38   width: 100%;
39   background-color:#0e99cd;
40 }
41 .left {
42   width: 200px;
43   background:#72cdef;
44   margin-left: -100%; // 第一行且靠左
45   position: relative; // 給left推到左邊
46   left: -200px;
47 }
48 .right {
49   width: 150px;
50   background:#72cdef;
51   margin-right:-150px; // 靠右
52 }

問題

正常情況下是沒有問題，但是特殊情況下就會有問題，如果將瀏覽器無線放大時，如圖，當main部分的寬小于left部分時就會發生布局混亂，當中間的寬度小與左邊的寬度時布局會錯亂

雙飛翼布局 

圣杯布局和雙飛翼布局前一半相同，三個盒子都是float浮動，以形成三欄布局，不同在于解決 中間自適應的盒子內容不被左右盒子遮擋問題思路不一樣，

html 結構如下：

 1 <header>我是雙飛翼頭部</header>
 2 <main class="clearFloat">
 3   <div class="middle">middle
 4     <section class="middle-wrap">
 5       <p>middlemiddle</p>
 6       <p>middlemiddle</p>
 7       <p>middlemiddle</p>
 8       <p>middlemiddle</p>
 9     </section>
10   </div>
11   <div class="left">left</div>
12   <div class="right">right</div>
13 </main>
14 <footer>我是雙飛翼底部</footer>

在middle 里面加了一層盒子，并且設定了這層盒子的外邊距

 1 * {
 2   padding: 0;
 3   margin: 0;
 4 }
 5 body {
 6  box-sizing: border-box;
 7 }
 8 
 9 header,footer {
10   font-size:14px;
11   height: 50px;
12   line-height:50px;
13   background-color:#ccc;
14   text-align:center;
15 }
16 main {
17   overflow: hidden;
18   position:relative;
19 }
20 main > div {
21   float: left;
22   text-align:center;
23   padding-top:20px;
24   padding-bottom: 10000px; // 實作等高
25   margin-bottom: -10000px;// 實作等高
26 }
27 .clearFloat:after{
28     content: "";
29     display: block;
30     clear: both;
31     visibility: hidden;
32     height: 0;
33 }
34 .clearFloat{
35     zoom: 1;
36 }
37 .middle {
38   width: 100%;
39   background-color:#0e99cd;
40 }
41 // 自身遠離左右兩邊
42 .middle-wrap {
43   margin: 0 150px 0 200px;
44 }
45 .left {
46   width: 200px;
47   background:#72cdef;
48   margin-left: -100%; // 推到第一行且靠左
49 }
50 .right {
51   width: 150px;
52   background:#72cdef;
53   margin-left:-150px; // 靠右
54 }

區別

處理中間盒子被遮擋思路不一樣

圣杯布局是為三個元素的父元素加上padding屬性，為左右兩邊騰開位置，左邊兩邊通過定位來確定位置

雙飛翼布局是在加一層盒子，設定這層盒子的左右外邊距，左右兩邊通過負的margin來定位

其他三列布局或者多列布局

flex、gird 等都是不錯的解決方案

• left要放到main的左邊，設定margin-left: -100%,因為margin的百分比是相對與父元素的，所以需要整整一行的寬度才能補償這個margin的值，所以left就能到main的左邊，

標籤：其他

上一篇：JavaScript實作圖片跟隨滑鼠效果

下一篇：[JS設計模式]：策略模式及應用-計算獎金、表單驗證的實作（5）