聖杯佈局和雙飛翼佈局的實現過程

相信很多人都搜過聖杯佈局和雙飛翼佈局，也知道他們的由來，在這裡我就不一一贅述了，今天主要講的是當我遇到兩個佈局時，我是怎樣一步一步從開始到實現的過程，例如：剛開始我也不懂為什麼聖杯佈局和雙飛翼佈局的區別，不懂聖杯佈局為什麼會有相對定位等一些問題，在這裡給大家講下我的理解，如有錯誤，歡迎批評指正。好 ...

相信很多人都搜過聖杯佈局和雙飛翼佈局，也知道他們的由來，在這裡我就不一一贅述了，今天主要講的是當我遇到兩個佈局時，我是怎樣一步一步從開始到實現的過程，例如：剛開始我也不懂為什麼聖杯佈局和雙飛翼佈局的區別，不懂聖杯佈局為什麼會有相對定位等一些問題，在這裡給大家講下我的理解，如有錯誤，歡迎批評指正。好了，接下來開始今天的寫文章之旅！聖杯佈局和雙飛翼佈局實現的問題都是三列佈局，兩邊定寬，中間自適應佈局，要註意的是中間欄(重要的東西)要在放在文檔流前面以優先渲染。聖杯佈局 1、首先定義三列，為它們設置簡單的css樣式，代碼如下： [html] view plain copy

<!DOCTYPE html>
<html>
<head>
<style>
.left{
background: #E79F6D;
width:150px;
float:left;
}
.main{
background: #D6D6D6;
width:100%;
float:left;
}
.right{
background: #77BBDD;
width:190px;
float:left;
}
</style>
</head>
<body>
<div class="con">
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</body>
</html>

實現效果圖：

這就是普通的讓三個div左浮動顯示出來的效果； 2、我們讓Left和Right與main在同一排，這裡需要用到margin-left的負值，這裡如果margin-left是負值，我理解的是在此基礎上往左邊移，設置Left的margin-left:-100%，也就是往左移main的整個寬度，這時Left的左邊緣跟main的左邊緣重疊，即Left的150px寬覆蓋住了main的150px寬；

這時Right跑到左邊了，再對Right設置margin-left:-190px;即right也跑到上面去了，Right的右邊緣和main的右邊緣對齊，Right的寬度覆蓋了main的右邊的寬度；現在Left和Right都跑上面去了，但是需要註意的是main的值不見了，因為它被覆蓋了，設置left和right的margin值只是改變Left和Right的位置，對於main來說還是在以前的位置上，接下來要考慮的問題就是如何定位main的位置？

3、需要給con容器加padding值，padding值的作用是給這整個容器均移動padding值，如在剛開始Left和Right沒上移的時候，給con加padding值的效果如下：

現在在Left和Right以及main都在同一排的情況下，加padding的值，就把main的定位到合適的位置了，但是這時的問題是：Left和Right也跟著一起縮了，所以要把Left和Right定位帶之前的位置，該怎麼定位呢？ 4、這時Left和Right需要用到css 的left屬性了，left 屬性規定元素的左邊緣,該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。註意使用屬性left的時候要給這個元素定位，絕對定位和相對定位都可以，如果不使用定位的話沒有效果，具體為什麼我也不知道，大家可以自行百度。 Left的css樣式加上：position:relative;left：-150px; 同理css的right屬性也是如此，position:relative;right:-190px; Left和Right回到它們各自的位置上，OK，完成聖杯的佈局，效果圖貼上：

完整代碼： [html] view plain copy

<!DOCTYPE html>
<html>
<head>
<style>
.con {
padding-left: 150px;
padding-right: 190px;
}
.left{
background: #E79F6D;
width:150px;
float:left;
margin-left: -100%;
position: relative;
left:-150px;
}
.main{
background: #D6D6D6;
width:100%;
float:left;
}
.right{
background: #77BBDD;
width:190px;
float:left;
margin-right: -190px;
position: relative;
right: -190px;
}
</style>
</head>
<body>
<div class="con">
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</body>
</html>

雙飛翼佈局雙飛翼佈局可以看成是對聖杯佈局的改進，因為聖杯佈局用到的標簽屬性較多，用著也較麻煩，所以淘寶玉伯大大就提出來雙飛翼的佈局，雙飛翼是把三列佈局比作鳥，中間欄是鳥身，兩邊寬是鳥的兩翼，重要的是鳥的身體擺好，再安兩翼。思路和聖杯佈局一樣，這裡我還是以上一個作例子，用到main，left，right（其實用main sub extra更形象）。前兩步都是一樣的，重要的是第三步，在前兩步的完成後已經形成同行排列，只不過main值被覆蓋了，聖杯佈局的第三步是給con容器添加padding屬性，而雙飛翼佈局是為main裡面的內容再加一個div，讓main的內容包含在內層div里， [html] view plain copy

<body>
<div class="con">
<div class="main">
<div class="mc">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</body>

這時，只要設置mc的margin屬性就可以實現三列佈局了，而且main也正常顯示；這裡，不用設置con容器的padding屬性，也不用給Left和Right運用left，right屬性，因為設置padding屬性就是為了不覆蓋main的值，現在將main里的內容放在一個div里，再為它設置margin屬性，也就實現了不遮擋main裡面的內容值，因此雙飛翼佈局使用屬性個數減少，看著更簡便。代碼如下： [html] view plain copy