聖杯布局和雙飛翼布局

聖杯布局和雙飛翼布局主要用來解決以下問題：

1.三列布局，兩側定寬，中間自適應。2.中間欄在瀏覽器中優先載入渲染。

解決思路：

首先把中間的div寫到前面，然後左側，然後右側。這樣就解決了第二個問題，中間的div優先渲染。

但是這樣會存在乙個問題，寫到前面的也會顯示在前面。

為了解決這個問題，我們讓這三列都浮動起來。然後設定中間列寬度為100%。

此時中間列在第一行，左右都在第二行。此時只需要將左列移動到中間的左邊，右列移動到中間的右邊。我們給左右加乙個固定寬度，比如150px。

然後給左列加乙個負邊距，margin-left：-100%；右列加乙個負邊距margin-left：-150px；

此時可以看到三列布局已經形成。但是問題在於，中間div的內容被擋住了。在解決這個問題上，聖杯布局和雙飛翼布局開始出現不同的思路。

聖杯布局首先給三列div外面套上乙個div，我們可以使用語義化標籤article。將article設定了左右padding-left和padding-right後，將左右兩個div用相對布局position: relative。此時可以看到三列都向中間縮排了。然後再分別給左右兩列增加right和left的負值，就可以達到目的了。

**如下：

聖杯布局html**：

我是中間
我是左        
我是右        

聖杯布局css**：

*article
.main
.left
.right
.main,.left,.right

**如下：

雙飛翼布局html**：

我是中間
我是左我是右    

雙飛翼布局css**：

*.main
.inside
.left
.right
.main,.left,.right

ending。

聖杯布局和雙飛翼布局主要用來解決以下問題：

1.三列布局，兩側定寬，中間自適應。2.中間欄在瀏覽器中優先載入渲染。

解決思路：

首先把中間的div寫到前面，然後左側，然後右側。這樣就解決了第二個問題，中間的div優先渲染。

但是這樣會存在乙個問題，寫到前面的也會顯示在前面。

為了解決這個問題，我們讓這三列都浮動起來。然後設定中間列寬度為100%。

此時中間列在第一行，左右都在第二行。此時只需要將左列移動到中間的左邊，右列移動到中間的右邊。我們給左右加乙個固定寬度，比如150px。

然後給左列加乙個負邊距，margin-left：-100%；右列加乙個負邊距margin-left：-150px；

此時可以看到三列布局已經形成。但是問題在於，中間div的內容被擋住了。在解決這個問題上，聖杯布局和雙飛翼布局開始出現不同的思路。

聖杯布局首先給三列div外面套上乙個div，我們可以使用語義化標籤article。將article設定了左右padding-left和padding-right後，將左右兩個div用相對布局position: relative。此時可以看到三列都向中間縮排了。然後再分別給左右兩列增加right和left的負值，就可以達到目的了。

**如下：

聖杯布局html**：

我是中間
我是左        
我是右        

聖杯布局css**：

*article
.main
.left
.right
.main,.left,.right

**如下：

雙飛翼布局html**：

我是中間
我是左我是右    

雙飛翼布局css**：

*.main
.inside
.left
.right
.main,.left,.right

ending。

聖杯布局 雙飛翼布局

前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 container middle left right style head ...

聖杯布局和雙飛翼布局

雙飛翼布局和聖杯布局其實是我們經常會在 中看到的經典的三欄式布局，即中間是主要內容main content，然後是左邊側欄，一般是 的分類資訊，右邊欄就是一些附屬功能，最典型的例子就是 和京東。main main son left right 上面就是雙飛翼布局的html 結構非常清晰，分為main...

聖杯布局和雙飛翼布局

一 聖杯布局 重點 content的padding，left的margin left和left值，right的margin left和right值 lang en charset utf 8 聖杯布局title header content content main content left,con...