經典三欄布局之聖杯 雙飛翼 彈性布局

2022-07-14 17:33:10 字數 4459 閱讀 5362

聖杯布局和雙飛翼布局是前端工程師需要掌握的布局方式，兩者功能相同，都是為了實現兩側寬度固定，中間寬度自適應的布局方式，此外，使用新增的flex布局，可以使布局更加簡單。

雙飛翼布局和聖杯布局雖然實現方式有所差異，但是基本上都遵循了以下幾點：

下面依次介紹聖杯布局、雙飛翼布局、彈性布局實現三欄布局

我們先搭建主體框架，將主體結構寫出來

<


div 


class


="header"


>


div>


<


div 


class


="container"


>


div>


<


div 


class


="footer"


>


div>
我們將為左右預留出一定的空間，作為左右固定兩欄的位置

.container
這時，我們的主體結構變成這樣了

接下來我們將左、中、右三列新增到主體框架中

<


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寫在最前面

隨後給三列設定寬度和浮動，然後給footer新增清除浮動

#container .column 


#center 


#left 


#right 


#footer
注：此時為center新增的100%寬度，是父元素的內容寬度，因為父元素有左右padding，所以center的寬度只是中間欄的寬度

且由於center佔據了內容寬度的100%，所以導致左右列被換行。得到以下效果：

由於center，寬度的影響，導致left和right被擠到下一行，這裡我們可以將它們看作在同一行，為left新增負外邊距。

#left
注：這裡的-100%是指父元素內容寬度的100%,所以，left會移動到最左側，如下圖示

隨後我們為每個塊新增相對定位，並使left相對自己偏移200px，正好可以覆蓋center的padding值。

#container .columns 


#left 



4、移動right塊
接下來我們將right塊移到右邊，我們依舊可以將其看作和center同行。這裡依舊採用負外邊距。

#right
現在，聖杯布局就已經完全成功了。

雖然我們已經將聖杯布局成功的寫了出來，但是要考慮到，當頁面縮小時如何保證頁面的正確顯示？這就涉及到了最小寬度，但並不是簡單的left+right = 350px;仔細想一想，此前我們對left設定了相對定位。所以left的200px存在於center上，所以最小寬度為200+150+200 = 550px;因此，再添上下面這段**：

body
整體布局css為：

body 


#container 


#container .column 


#center 


#left 


#right 


#footer
搭建主體結構

<


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 


.column 


#center 


#left 


#right 


#footer #container 


.column
雙飛翼布局的dom結構與聖杯布局的區別是用container僅包裹住center，另外將.column類從center移至container上。將得到如下所示的效果

以上**將container,left,right設定為float: left，而在container內部，center由於沒有設定浮動，所以其寬度預設為container的100%寬度，通過對其設定margin-left和margin-right為左右兩列預留出了空間。

將left放置到預留位置：

#left

如圖：


#right
如圖：


最後計算最小頁面寬度，我們最好把寬度留大一些。


body
整體**布局css為：


body 


#container 


.column 


#center 


#left 


#right 


#footer 


搭建主體結構


<


div 


class


="container"


>


<


div 


class


="left"


>


div>


<


div 


class


="center"


>


div>


<


div 


class


="right"


>


div>


div>


新增flex彈性盒子


.container 


.left 


.center 


.right 


記得一定要給center塊新增flex:1，這是必要的，否則將無法實現兩邊固定，中間彈性的布局


如圖
 
三欄布局之聖杯布局 雙飛翼布局
聖杯布局和雙飛翼布局是經典的三欄布局。實現了左右兩側固定中間自適應的布局。聖杯布局主要是利用float 相對定位 容器的padding來完成布局。doctype html content type content text html charset utf 8 test page title htm...


經典布局之聖杯布局 雙飛翼布局
所謂經典，說白了就是古老的東西，但是又是很有用的東西。大多數前端頁面仔包括本菜 不！我可是勵志成為前端工程師的男人，頁面仔太刺耳 都或多或少了解的聖杯布局和雙飛翼布局。本文只對這兩種布局進行簡單的 畢竟本菜真的好菜啊 不管怎樣，寫作的好處自然很多，可以鞏固自己的知識，弘揚程式猿一貫的樂於分享的精神，...


聖杯 雙飛翼布局
自己雖然經歷著web應用的開發,總是拿著別人寫好的css來引用到自己的專案當中,甚至一度迷上了bootstrap,發現有了它自己可以不用在寫程式邏輯的同時還要去修改別人的css.當然開發的應用大多數是企業內部應用,個別網際網路的程式.2016偶然的機會接觸到前端這個概念,發現自己還是挺喜歡前端的這些...