聖盃佈局與雙飛翼佈局的相同點與不一樣點
三欄式佈局是衆多網頁的常規佈局之一，咱們在採用三欄式佈局時所提出的要求通常是左欄與右欄定寬，中間部分寬度自適應，中間部分做爲內容主體，咱們須要將其放在左欄與右欄以前來達到優先渲染的效果。css
2006年Matthew Levine在《A LIST APART》上發表了一篇名爲《In Search of the Holy Grail》的文章，提出了聖盃佈局的思路。利用負外邊距來實現咱們須要的效果，充分體現了CSS的藝術與負外邊距的強大。html
以後淘寶提出了爲了實現一樣的效果提出了雙飛翼佈局的思路，一樣使用了負外邊距來移動欄目從而達到目的。所以，聖盃佈局和雙飛翼佈局有着類似的思路，可是在某些細節上也有不一樣點。佈局
相同點
首先，咱們創建好左中右三欄，由於中間欄須要優先渲染，咱們將其放在最前面。code
<div id="content">
<div id="main">main</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
要實現左中右的水平排列，咱們要將塊狀元素浮動。htm
#main,#left,#right{
float: left;
}
假設左欄定寬200px，右欄定寬120px。（爲了看清楚效果，咱們暫時爲三欄設置一個背景色，同時設置不一樣的高度以便觀察div之間是否重疊）get
#main,#left,#right{
float: left;
}
#left{
background-color: red;
height: 100px;
width: 200px;
margin-left: -100%;
}
#main{
background-color: green;
height: 150px;
width: 100%;
}
#right{
background-color: blue;
height: 100px;
width: 120px;
}
獲得以下效果：it
接下來就要使用到強大的負外邊距了，咱們先處理左欄，由於中間欄的寬度爲100%，因此左欄被擠到下面去了。如今left要到最左邊的位置，因此咱們在left的樣式下輸入：io
margin-left: -100%;
能夠看到left已經順利的被拉回來了。渲染
right同理，它靠在最右邊。因此輸入：meta
margin-left：-120px；
獲得效果：
以上的步驟，聖盃佈局和雙飛翼佈局是如出一轍的。
不一樣點
聖盃佈局
通過以上的設置，出現了一個問題，就是left、right都和main重疊了，咱們須要把main縮回來，如今它的寬度充滿了整個父元素content，而且隨着父元素的變化而變化，咱們對父元素進行設置。
#content{
padding: 0 120px 0 200px;
}
可是left和right都在content裏，也受到影響被拉進來了。
因此咱們要分別讓left往左移，right往右移到它們該在的位置上去，爲了讓它們移動，咱們須要在left和right的樣式下設置：
position: relative;
而且對left設置：
left: -200px;
對right設置：
right：-120px；
這樣咱們就能的到咱們所想要的三欄式佈局的效果了。
聖盃佈局CSS代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三欄式佈局</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#main,#left,#right{
float: left;
}
#left{
background-color: red;
height: 100px;
width: 200px;
margin-left: -100%;
position: relative;
left: -200px;
}
#main{
background-color: green;
height: 150px;
width: 100%;
}
#right{
background-color: blue;
height: 100px;
width: 120px;
margin-left: -120px;
position: relative;
right: -120px;
}
#content{
padding: 0 120px 0 200px;
}
</style>
</head>
<body>
<div id="content">
<div id="main">main</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
雙飛翼佈局
面臨一樣的問題，聖盃佈局是對三欄的父元素的內邊距進行了設置，而雙飛翼佈局則是從另外一個角度入手。既然左右兩邊要被left和right獨享，那main就不要這兩邊了，那就不會重疊了。
咱們創造一個新的div在main的裏面，而且把內容都放在這個main的子元素裏。
<div id="main"><div id="main_in">main</div></div>
而且給它設置左右的外邊距，讓出左右欄目的位置就能夠實現咱們須要的效果了。
#main_in{
background-color: grey;
height: 150px;
margin-left: 200px;
margin-right: 120px;
}
效果以下：
（去掉main的背景色便可，效果圖沒有去掉是爲了方便展現main_in的效果！）
雙飛翼佈局代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三欄式佈局</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#main,#left,#right{
float: left;
}
#left{
background-color: red;
height: 100px;
width: 200px;
margin-left: -100%;
}
#main{
background-color: green;
height: 150px;
width: 100%;
}
#right{
background-color: blue;
height: 100px;
width: 120px;
margin-left: -120px;
}
#main_in{
background-color: grey;
height: 150px;
margin-left: 200px;
margin-right: 120px;
}
</style>
</head>
<body>
<div id="content">
<div id="main"><div id="main_in">main</div></div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
-
每一个你不满意的现在，都有一个你没有努力的曾经。