兩招搞定三欄佈局 聖盃佈局 雙飛翼佈局

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

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

首先,我們先定義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