經典三欄佈局之聖盃、雙飛翼、彈性佈局
聖盃佈局和雙飛翼佈局是前端工程師須要掌握的佈局方式，二者功能相同，都是爲了實現兩側寬度固定，中間寬度自適應的佈局方式，此外，使用新增的flex佈局，可使佈局更加簡單。css
雙飛翼佈局和聖盃佈局雖然實現方式有所差別，可是基本上都遵循瞭如下幾點：前端
-
兩側寬度固定，中間寬度自適應前端工程師
-
中間結構在DOM上優先，以便於優先渲染框架
下面依次介紹聖盃佈局、雙飛翼佈局、彈性佈局實現三欄佈局佈局
聖盃佈局
1、搭建主體結構
咱們先搭建主體框架，將主體結構寫出來flex
<div class="header"></div> <div class="container"></div> <div class="footer"></div>
咱們將爲左右預留出必定的空間，做爲左右固定兩欄的位置spa
.container{
padding-left:200px;
padding-right:150px;
}
這時，咱們的主體結構變成這樣了
2、添加中、左、右三列
接下來咱們將左、中、右三列添加到主體框架中3d
<div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> <div id="footer"></div>
注：注意container內三欄的前後順序，center寫在最前面code
隨後給三列設置寬度和浮動，而後給footer添加清除浮動blog
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}
注：此時爲center添加的100%寬度，是父元素的內容寬度，由於父元素有左右padding，因此center的寬度只是中間欄的寬度
且因爲center佔據了內容寬度的100%，因此致使左右列被換行。獲得如下效果：
3、移動left塊
因爲center，寬度的影響，致使left和right被擠到下一行，這裏咱們能夠將它們看做在同一行，爲left添加負外邊距。
#left {
width: 200px;
margin-left: -100%;
}
注：這裏的-100%是指父元素內容寬度的100%,因此，left會移動到最左側，以下圖示
隨後咱們爲每一個塊添加相對定位，並使left相對本身偏移200px，正好能夠覆蓋center的padding值。
#container .columns {
float: left;
position: relative;
}
#left {
width: 200px;
margin-left: -100%;
right: 200px;
}
四、移動right塊
接下來咱們將right塊移到右邊，咱們依舊能夠將其看做和center同行。這裏依舊採用負外邊距。
#right {
width: 150px;
margin-right: -150px;
}
如今，聖盃佈局就已經徹底成功了。
雖然咱們已經將聖盃佈局成功的寫了出來，可是要考慮到，當頁面縮小時如何保證頁面的正確顯示？這就涉及到了最小寬度，但並非簡單的left+right = 350px;仔細想想，此前咱們對left設置了相對定位。因此left的200px存在於center上，因此最小寬度爲200+150+200 = 550px;所以，再添上下面這段代碼：
body {
min-width: 550px;
}
總體佈局css爲：
body {
min-width: 550px;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
#right {
width: 150px;
margin-right: -150px;
}
#footer {
clear: both;
}
雙飛翼佈局
1、搭建DOM結構
搭建主體結構
<body> <div id="header"></div> <div id="container" class="column"> <div id="center"></div> </div> <div id="left" class="column"></div> <div id="right" class="column"></div> <div id="footer"></div> <body>
添加css代碼
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}#container {
width: 100%;
}
.column {
float: left;
}
雙飛翼佈局的DOM結構與聖盃佈局的區別是用container僅包裹住center，另外將.column類從center移至container上。將獲得以下所示的效果
以上代碼將container,left,right設置爲float: left，而在container內部，center因爲沒有設置浮動，因此其寬度默認爲container的100%寬度，經過對其設置margin-left和margin-right爲左右兩列預留出了空間。
2、移動left塊
將left放置到預留位置：
#left {
width: 200px;
margin-left: -100%;
}
如圖：
3、移動right塊
#right {
width: 150px;
margin-left: -150px;
}
如圖：
最後計算最小頁面寬度，咱們最好把寬度留大一些。
body {
min-width: 500px;
}
總體代碼佈局css爲：
body {
min-width: 500px;
}
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
margin-left: -100%;
}
#right {
width: 150px;
margin-left: -150px;
}
#footer {
clear: both;
}
Flex彈性三欄佈局
1、搭建DOM結構
搭建主體結構
<div class="container"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>
添加flex彈性盒子
.container {
display: inline-flex;
flex-direction: row;
width: 100%;
}
.left {
width: 200px;
}
.center {
flex: 1;
width: 100%;
}
.right {
height: 300px;
width: 150px;
background: rgb(252, 78, 39);
}
記得必定要給center塊添加flex:1，這是必要的，不然將沒法實現兩邊固定，中間彈性的佈局
如圖
-
每一个你不满意的现在，都有一个你没有努力的曾经。