布局 多列等高布局方法

2022-08-11 22:24:12 字數 1179 閱讀 5809

多列等高布局在實際應用中比較常見，作為面試的乙個點也常遇到。做個總結。

首先想到的第一種就是 flex 和 min-height , 後朋友提醒，去掉 min-height 試試。由於align-items預設是 stretch，會將所有元素拉伸到一樣高，所以有了預設等高效果。

flex 簡單方便，而且也是現在已經是普遍使用了。如果不需要相容老瀏覽器，這個會非常好用。

html：

1


2這是左邊內容


3這是中間內容，右邊暫時無內容。這是中間內容，右邊暫時無內容。這是中間內容，右邊暫時無內容。這是中間內容，右邊暫時無內容。這是中間內容，右邊暫時無內容。這是中間內容，右邊暫時無內容。45
css:

1


.wrap 


4.wrap .box
效果：

2、padding 補償法。

就是首先將 padding-bottom 設定的非常大，然後將 margin-bottom 設定成相反的大小來抵消。然後父級設定超出隱藏。當任何一列變成最高時，其他比這列矮的列則會用它們的padding-bottom來補償這部分高度差。

css:

1


.wrap 


5.wrap .box
3、利用定位實現（偽等高），只能將較矮部分最為較高部分的邊框，看**：

1


.wrap 


4     .wrap .box:nth-of-type(1) 


10     .wrap .box:nth-of-type(2) 


15     .wrap .box:nth-of-type(3)
4、table-cell 。table-cell 布局天然就是等高布局。如下：

1


.wrap .box
5、邊框模擬和 4 有些相似。這個也要求中間的高度要高於兩邊。

1


.wrap 


4     .box:nth-of-type(2) 


9     .box:nth-of-type(1) 


15     .box:nth-of-type(3)

多列等高布局

需求 當兩列的內容變化時，要保證內容相同，且和較長的那列相同。lang en charset utf 8 測試專用title type text css parent left right style head class parent class left leftp div class righ...

多列等高布局

網頁編寫中因為div沒有固定高度，裡面的內容大小不一樣導致div的高度自適應也是不一樣的 原理 padding bottom 500px 會讓三個盒子拉伸的非常高，然後利用 margin bottom 500px 將各個元素切割掉 500px，最後父元素將超出的部分隱藏，就出現了這個效果。統一稱為最...

常用的多列等高布局收藏

我們在寫頁面的時候，經常會遇到多欄布局的情況，如果欄目帶有背景色並且欄目內容高度不一樣的話，就會導致每個欄目的底部是無法不齊的，這樣在排版布局以及給使用者的體驗不是很好！實際的問題效果如下圖所示 我們要實現的效果就是當各個欄目內容不一樣的情況下，保證各個欄目還是對齊的。想要實現的效果如下圖所示 ht...