三欄佈局

三欄佈局

  介紹一下如何實現三欄佈局（聖盃佈局、雙飛翼佈局）。


  目錄：

---

介紹

  三欄佈局，即兩邊的盒子寬度固定，中間的盒子自適應，窗口變大變小不影響兩邊盒子的大小，中間的盒子隨之變化。

---

聖盃佈局

第一步：佈局結構：

// html
<header><h4>Header</h4></header>
<div class="container">
    <div class="center"><h4>Center</h4></div>
    <div class="left"><h4>Left</h4></div>
    <div class="right"><h4>Right</h4></div>
</div>
<footer><h4>Footer</h4></footer>

// css
header, footer{width: 100%;height: 40px;background-color: blueviolet;}
.container{height: 200px; overflow: hidden;}
.center{float: left; width: 100%; height: 200px; background-color: greenyellow;}
.left{float: left; width: 200px;height: 200px; background-color: red;}
.right{float: left; width: 200px; height: 200px; background-color: blue;}

  這時候，我們可以看到，因爲 center 盒子的寬度設爲爲 100% 而且我們在 .container 設置了 overflow: hidden; ，所以 left 和 right 在 center 的下一行被隱藏掉了。

注意三欄需要先寫中間盒子！

第二步：設置負邊距：

1. 讓左盒子去到中間盒子的左邊，設置其左邊距爲 -100%(即負中間盒子的寬度)：.left{margin-left: -100%;}。
2. 讓右盒子去到中間盒子的左邊，設置其左邊距爲 -200px(即負自身寬度)：.right {margin-left：-200px;}。
     這時候已經基本實現了三欄佈局，但是，我們可以看到中間盒子的兩邊都分別被左右盒子所覆蓋擋住。

第三步：設置父元素的內邊距以及對左右盒子使用相對定位：

1. 設置父級元素的左右內邊距，這樣三個盒子便會和瀏覽器的左右邊界保持一段距離：.container{ padding: 0 200px;}。
2. 對左右盒子使用相對定位，使它們分別移動到剛剛父元素空出來的空位上：

.left{position: relative; left: -200px;}
.right{position: relative;right: -200px;}

  這樣三步就實現了聖盃佈局。

---

雙飛翼佈局

// html
<header><h4>Header</h4></header>
<div class="container">
    <div class="center-wrap">
        <div class="center"><h4>Center</h4></div>
    </div>
    <div class="left"><h4>Left</h4></div>
    <div class="right"><h4>Right</h4></div>
</div>
<footer><h4>Footer</h4></footer>

// css
.container{height:200px;overflow:hidden;}
.center-wrap{float:left;width: 100%;height: 200px;}
.center{margin-left:200px;margin-right: 200px;height: 200px; background-color: greenyellow;}
.left{float:left;margin-left: -100%; width: 200px;height: 200px;background-color: red;}
.right{float:left;margin-left: -200px; width: 200px;height: 200px;background-color: blue;}

  雙飛翼佈局和聖盃佈局的方法差不多，不同的是，這次不再是給父級元素 container 設置左右內邊距，而是給中間盒子加一層 div(.center-wrap)，此時 center-wrap 的寬度爲 100%，就像聖盃佈局一樣會被左右盒子擋住，然後我們再給其子元素 center 設置左右邊距，這樣就大功告成了。

注意這裏的中間盒子依舊是排在最前面的盒子。

---

絕對定位

// html
<header><h4>Header</h4></header>
<div class="container">
    <div class="left"><h4>Left</h4></div>
    <div class="center"><h4>Center</h4></div>
    <div class="right"><h4>Right</h4></div>
</div>
<footer><h4>Footer</h4></footer>

// css
.container{position: relative; height: 200px; overflow: hidden;}
.left{position: absolute; top:0; left: 0; width: 200px; height: 200px; background-color: red;}
.center{margin:0 200px; width: 100%; height: 200px; background-color: greenyellow;}
.right{position: absolute; top:0; right: 0; width: 200px; height: 200px; background-color: blue;}

  使用絕對佈局之前，要先給父級元素 container 定義一個相對佈局（relative），應爲絕對佈局是相對於離它最近的一個已定位的父級元素進行定位的方法，然後左右盒子使用絕對佈局定位到中間盒子的兩側，接着給中間盒子設置左右的外邊距，這樣便大功告成了。

---

自身浮動

// html
<header><h4>Header</h4></header>
<div class="container">
    <div class="left"><h4>Left</h4></div>
    <div class="right"><h4>Right</h4></div>
    <div class="center"><h4>Center</h4></div>
</div>
<footer><h4>Footer</h4></footer>

// css
.container{height:200px; overflow:hidden;}
.left{float: left; width: 200px; height: 200px; background-color: red;}
.center{margin:0 200px; width: 100%; height: 200px; background-color: greenyellow;}
.right{float: right; width: 200px; height: 200px; background-color: blue;}

  這個方法只需使左右盒子分別向左向右浮動，然後給中間盒子設置外邊框即可。

---

flex佈局

// html
<header><h4>Header</h4></header>
<div class="container">
    <div class="left"><h4>Left</h4></div>
    <div class="center"><h4>Center</h4></div>
    <div class="right"><h4>Right</h4></div>
</div>
<footer><h4>Footer</h4></footer>

// css
.container{display: flex; overflow:hidden;}
.left{width: 200px; height: 200px; background-color: red;}
.center{flex: 1; height: 200px; background-color: greenyellow;}
.right{width: 200px; height: 200px; background-color: blue;}

  這個方法只需將中間盒子的 flex-grow、flex-shrink 和 flex-basis 都設置爲1即可。

• flex-grow：當有多餘空間時，定義元素的放大比例（0 默認值，不放大，1爲等比填充）。
• flex-shrink：當空間不足時，定義元素的縮小比例（ 1 默認值，等比縮小，數值越大縮小越多）。

• flex-basis：定義元素在主軸上佔據的空間。

---

calc函數

// html
<header><h4>Header</h4></header>
<div class="container">
    <div class="left"><h4>Left</h4></div>
    <div class="center"><h4>Center</h4></div>
    <div class="right"><h4>Right</h4></div>
</div>
<footer><h4>Footer</h4></footer>

// css
.container{heigiht: 200px; overflow:hidden;}
.left{float: left; width: 200px; height: 200px; background-color: red;}
.center{float: left; width: calc(100% - 400px); height: 200px; background-color: greenyellow;}
.right{float: left; width: 200px; height: 200px; background-color: blue;}

這個方法只需使用 CSS3 的 calc() 函數動態計算出中間盒子的寬度便可輕鬆實現三欄佈局。