聖杯布局和雙飛翼布局

聖杯布局和雙飛翼布局均是上中下結構，其中，中間部分又分為左中右三部分，左右兩側寬度固定，中間部分寬度自適應；上中下的結構比較簡單，使用三個div就可以實現，中間部分的左右兩側內容寬度固定，中間內容寬度自適應，實現起來就比較有技巧性，具體如下：

聖杯布局的html結構：

class
="container"
>
class
="header"
>
headerdiv
>
class
="main"
>
class
="center"
>
centerdiv
>
class
="left"
>
leftdiv
>
class
="right"
>
rightdiv
>
div>
class
="footer"
>
footerdiv
>
div>
聖杯布局中比較重要的就是中間部分樣式的設定：
1、讓左、中、右均浮動，（浮動會造成父元素高度坍塌，注意清除浮動帶來的影響）
.center, .left, .right
// 父元素解決浮動導致的高度坍塌
.main

2、左右兩側寬度固定，中間寬度設定為100%，（方便觀察效果，為左中右設定最小高度）

.left, .right .center .center, .left, .right

3、由於中間寬度100%，左中右均浮動，所以左右兩側會在換行顯示，為了讓左右兩側與中間部分在一行，分別為左右兩側分別設定負地margin值，對於左側：margin-left: -100%;（margin值為百分比時，其值是相對于父元素的寬度來計算的），對於右側：margin-left: 負的右側寬度;，這樣一來，左中右三部分就處於同一行了

.left .right

4、這個時候會存在乙個問題：就是左右兩側會覆蓋住中間部分的內容，為了解決這個問題，需要給父元素設定padidng，左右padding的值分別為左右兩側的寬度

.main

5、父元素設定完後padding後，頁面中左右兩側會出現空白，這時候通過相對定位以及left、right屬性分別將左右兩側移動到空白處，至此聖杯布局的中間部分就完成了！！！

.left .right

雙飛翼的html結構：

class
="container"
>
class
="header"
>
headerdiv
>
class
="main"
>
class
="center"
>
class
="content"
>
centerdiv
>
div>
class
="left"
>
leftdiv
>
class
="right"
>
rightdiv
>
div>
class
="footer"
>
footerdiv
>
div>
雙飛翼中間部分樣式的設定：
1、讓左、中、右均浮動，（浮動會造成父元素高度坍塌，注意清除浮動帶來的影響）
.center, .left, .right
// 父元素解決浮動導致的高度坍塌
.main

2、左右兩側寬度固定，中間寬度設定為100%，（方便觀察效果，為左中右設定最小高度）

.left, .right .center .center, .content, .left, .right

.left .right

4、這個時候會存在乙個問題：就是左右兩側會覆蓋住中間部分的內容，為了解決這個問題，雙飛翼通過為中間部分新增乙個子元素，為子元素設定margin來防止中間內容被覆蓋，至此雙飛翼布局的中間部分就完成了！！！

.content

從上面的實現過程中可以看出：雙飛翼布局與聖杯布局有相似之處，也有不同之處，相似之處在於也是讓中間的左中右三部分浮動，並通過負的margin值讓左右兩側與中間部分處於一行；不同之處在於在解決中間內容被左右兩側覆蓋時，聖杯布局通過向父元素新增padding和利用左右兩側的相對定位來處理，雙飛翼則是通過為中間部分新增乙個子標籤，通過設定子標籤的margin值來處理中間內容被覆蓋；

上面的是利用css2方式來實現的，下面給出乙個利用css3的flex彈性布局來實現的聖杯布局：

html結構：

class
="container"
>
class
="header"
>
headerdiv
>
class
="main"
>
class
="center"
>
centerdiv
>
class
="left"
>
leftdiv
>
class
="right"
>
rightdiv
>
div>
class
="footer"
>
footerdiv
>
div>
css樣式：
.container
.header, .footer
.main
.left, .right, .center
.left, .right
.left
.center

[1] 聖杯和雙飛翼布局介紹

聖杯布局和雙飛翼布局

聖杯布局 雙飛翼布局

聖杯布局和雙飛翼布局

聖杯布局和雙飛翼布局

相關推薦

聖杯布局雙飛翼布局