CSS 聖盃佈局 / 雙飛翼佈局的實現

工做的越久，有些基礎知識咱們可能就逐漸淡忘了，今天咱們來回顧一下css的聖盃佈局和雙飛翼佈局，

這兩個名詞你可能不熟， 那三欄佈局你確定就很是熟悉了，

就是兩邊定寬， 中間自適應 的 佈局 

1 ， 聖盃佈局  

<!--三欄佈局-->
<header>三欄佈局</header>
<div class="container">
    <div class="center column">center</div>
    <div class="left column">left</div>
    <div class="right column">right</div>
</div>
<footer>footer</footer>

首先HTML結構是這樣的，由於要保證中間的結構先渲染， 因此 center 要放在 最前面 。

*{
    margin: 0;
    padding: 0;
}
body{
    min-width: 700px;
}
header , footer{
    background-color: antiquewhite;
    text-align: center;
}
footer{
    clear: both;
}
.container{
    height: 200px;
}
.container .column{
    float: left;
    position: relative;
    height: 100%;
}
.center{
    width: 100%;
    background-color: tomato;
}
.left{
    width: 200px;
    background-color: aqua;
}
.right{
    width: 200px;
    background-color: chartreuse;
}

先讓它們浮動， 並給left 和 right 一個 固定 寬度， center寬度100%，

footer清除浮動流， 結果變成上面這樣  。

而後咱們要把 left  和 right 放上去   

先把left 放上去  ：

.left{
    width: 200px;
    background-color: aqua;
    margin-left: -100%;
}

加上 一個 margin-left 爲  負的本身的寬度  ， 變成了這樣：

 

 咱們能夠看到 center的文字被 left  蓋住了  ， 因此給container加一個padding 

.container{
    height: 200px;
    padding: 0 200px;
}

變成了這樣：

因爲加了padding， 內容區域變小， left 也跟過來了， 因此要給left設置一個left:

.left{
    width: 200px;
    background-color: aqua;
    margin-left: -100%;
    left: -200px;
}

這樣left 就到最左邊了， center文字也出來了， 同理right

.right{
    width: 200px;
    background-color: chartreuse;
    margin-left: -100%;
    right: -100%;
}

最終效果：

 

2   雙飛翼佈局（始於淘寶的UED）

和聖盃佈局差很少， 不一樣之處在於它們處理中間部分被兩邊蓋住的方法不一樣

雙飛翼佈局給center加了一個inner center ，而不是在最外層加container

HTML：

<header>雙飛翼佈局</header>

<div class="center column">
    <div class="inner-center">
        center
    </div>
</div>
<div class="left column">left</div>
<div class="right column">right</div>

<footer>footer</footer>

而後 給 inner-center  加margin  (只列出關鍵代碼) :

.center .inner-center{
    margin-left: 200px;
    margin-right: 200px;
    height: 100%;
    background-color: tomato;
}
.left{
    width: 200px;
    background-color: aqua;
    margin-left: -100%;
}
.right{
    width: 200px;
    background-color: chartreuse;
    margin-left: -200px;
}

最終效果和聖盃佈局同樣。。。。。。