1、等高布局

等高布局是指多列子元素在父元素中實現等高視覺效果的布局技巧。

1.1、實現要點（需求）

- 多列

- 每一列背景不同

- 其中任意一列變高，其它列同步變高

#### 1.2、方法一

##### 1.2.1、原理

利用padding和margin負值相抵消

- 利用padding提前延伸背景

- 利用margin負值抵銷padding的占位

1.2.2、實現步驟

- 通過浮動創建一個正常的三列布局（不同列背景不同）

- 父容器清浮動

- 每一列固定padding-bottom，同時指定一個margin負值，抵銷padding的占位

- 父容器overflow:hidden

##### 1.2.3、優缺點

- 合理的控制padding和margin值

- 可以實現任意列等高布局

### 1.3、方法二

##### 1.3.1、原理

盒子層層嵌套，利用內層盒子高度變化，外層盒子的高度也會同步變化

##### 1.3.2、實現步驟

- 準備三個負責背景的盒子.bg1，.bg2，.bg3，HTML結構上層層嵌套

- 將.left，.center，.right盒子放入最內層的背景盒子.bg3里

- 最內層的盒子.bg3清浮動

- 將.bg2，.bg3相對于當前位置進行移動，形成三列背景效果

- 將.left，.center通過margin負值移動到對應的背景處即可

##### 1.3.3、優缺點

- 結構復雜

- 可以創建任意列數

- 方便通過百分比實現自適應

### 2、圣杯布局分析實現要點

- 三列（不一定等高）

- 改變加載順序，優先加載中間列—（結構上:中左右，顯示效果上：左中右）

- 中間列自適應，兩側列固定

#### 2.1、圣杯布局

### 2.2、圣杯實現步驟

- 外框左右固定padding值，預留左側列和右側列的列寬

- .center寬度100%，.left，.right固定寬度

- 結構上.center，.left，.right依次浮動在一行排列

- 移動.left通過margin-left:-100%；配合相對定位position:relative；left:-200px；移動至左側列位置

- 移動.right通過margin-left:-200px；配合相對定位position:relative；left:200px；移動至右側列位置

雙飛翼

.1、雙飛翼實現步驟

- .centerbox與.left，.right浮動在一行排列

- .centerbox固定寬度100%，left，.right固定寬度

- .centerbox內部嵌套.center，不定寬度，通過定義左右margin留出左側列的寬和右側列寬

- 移動.left通過margin-left:-100%；實現

- 移動.right通過margin-left:-200px；實現

總結

以上是生活随笔為你收集整理的布局技巧-等高布局 圣杯布局 双飞翼布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。