CSS 圣杯布局 / 雙飛翼布局的實現(xiàn)

Aldous 發(fā)布于2019-04-23 11:40 / 3149人閱讀

摘要：先讓它們浮動，并給和一個固定寬度，寬度，清除浮動流，結(jié)果變成上面這樣。

工作的越久，有些基礎(chǔ)知識我們可能就逐漸淡忘了，今天我們來回顧一下css的圣杯布局和雙飛翼布局，

這兩個名詞你可能不熟，那三欄布局你肯定就非常熟悉了，

就是兩邊定寬，中間自適應(yīng) 的布局?

1 ，圣杯布局??


三欄布局

    center
    left
    right

footer

首先HTML結(jié)構(gòu)是這樣的，因為要保證中間的結(jié)構(gòu)先渲染，所以 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清除浮動流，結(jié)果變成上面這樣? 。

然后我們要把 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，內(nèi)容區(qū)域變小， left 也跟過來了，所以要給left設(shè)置一個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：

雙飛翼布局


    
        center
    

left
right

footer

然后給 inner-center? 加margin? (只列出關(guān)鍵代碼) :

.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;
}

最終效果和圣杯布局一樣。。。。。。