兩招搞定三欄布局 聖杯布局 雙飛翼布局

2022-08-05 12:39:15 字數 1120 閱讀 9194

如何實現如下的這種中間自適應寬度,左右兩欄固定寬度布局?

首先,我們先定義html結構:

中間的

左邊的右邊的

再來開始我們的布局,首先給這三個div都給乙個float: left,讓它們均左浮動。

.middle, .left, .right
接下來是最重要的兩個步驟,設定左盒子的margin-left: -100%,把左盒子拉上來,調整左盒子的浮動位置到中間盒子的左側。

再設定右盒子的margin-left: -右盒子寬度px,把右盒子拉上來,調整右盒子的浮動位置到中間盒子的右側。

.left

.right

【*】此時的布局基本出來了,但是中間盒子的左右兩側會被左右兩個盒子覆蓋掉,此時我們要通過相對定位來避免覆蓋。給左右盒子position: relative,再分別設定它們的left和right,並且控制父元素的padding來為左右兩邊留白。

.left

.right

.container

ok!大功告成,聖杯布局已經完成啦~

雙飛翼的布局基本和聖杯布局類似,它的html結構為:

中間的

左邊的右邊的

前面的布局和聖杯完全一致,只是從【*】開始的這一步略微有些差異。

在雙飛翼中避免左右盒子被覆蓋,是通過設定inner_middle的左右margin來實現的。

.inner_middle
另外,整個布局的左右padding留白也有些差異,直接設定父盒子的padding為左右留白的寬度就可以了。

.container
這裡還有第二種實現方式,html結構沿用聖杯布局的結構,通過設定左右padding來避免中間盒子內容的覆蓋。同時為了避免布局混亂,還有設定box-sizing: border-box,表示width包括border和padding,這樣可以保證即使設定右左右padding,它的總寬度也是不變的。

.middle

兩,三欄布局, 雙飛翼,聖杯布局

主要用於 我放一張圖你們就明白了 1.第一種使用margin和浮動實現 如下 1987年2月2日出生於山東省青島市,中國內地女演員 歌手,亞洲多棲發展女藝人。2008年,宋茜作為演員 廣告模特在亞洲地區正式開始演藝活動。2009年,擔任女子流行演唱組合f x 隊長,以歌手身份正式出道。2012年,主...

css兩欄布局 聖杯布局 雙飛翼布局

最近幾個月一直用vue在寫手機端的專案,主要寫業務邏輯,在js方面投入的時間和精力也比較多。這兩天寫頁面明顯感覺css布局方面的知識有不足,所以複習一下布局方法。box1 left box1 right 兩列自適應 box1 box1 left box1 right box1 box1 left b...

兩 三欄布局(聖杯雙飛翼)

常見頁面布局 一 兩欄布局,左邊定寬,右邊自適應 左邊左浮動,右邊加overflow hidden 變成bfc清除左側浮動元素的影響 left right 二 三欄布局,聖杯布局,雙飛翼布局 dom結構 header container center class column left class ...