聖杯布局和雙飛翼布局

2022-01-17 22:28:06 字數 2467 閱讀 8012

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

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

雙飛翼布局則是在中間div內部建立子div用於放置內容,在該子div裡用margin-left和margin-right為左右兩欄div留出位置。

**如下:

雙飛翼布局html**:

我是中間

我是左我是右

雙飛翼布局css**:

*.main

.inside

.left

.right

.main,.left,.right

接下來如果我們想讓三列等高,可以給三列分別增加屬性padding-bottom: 9999px;margin-bottom: -9999px;來將三列拉到無限長。再給三列外面的article標籤加上overflow: hidden;屬性就行了。

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

雙飛翼布局則是在中間div內部建立子div用於放置內容,在該子div裡用margin-left和margin-right為左右兩欄div留出位置。

**如下:

雙飛翼布局html**:

我是中間

我是左我是右

雙飛翼布局css**:

*.main

.inside

.left

.right

.main,.left,.right

接下來如果我們想讓三列等高,可以給三列分別增加屬性padding-bottom: 9999px;margin-bottom: -9999px;來將三列拉到無限長。再給三列外面的article標籤加上overflow: hidden;屬性就行了。

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...