我們在寫頁面的時候，經常會遇到多欄布局的情況，如果欄目帶有背景色並且欄目內容高度不一樣的話，就會導致每個欄目的底部是無法不齊的，這樣在排版布局以及給使用者的體驗不是很好！實際的問題效果如下圖所示：
我們要實現的效果就是當各個欄目內容不一樣的情況下，保證各個欄目還是對齊的。想要實現的效果如下圖所示：
html結構**如下所示：
複製**.article
.article>li
.article>li>p 複製**
.article
.article>li
.article>li>p
複製**
table元素中的table-cell元素預設就是等高的。
.article
.article>li
.article>li>p
複製**
flex中的伸縮專案預設為拉伸為父元素的高度，同樣可以實現等高效果。在pc端相容性不是很好，在ie9以及ie9以下不支援。
.article
.article>li
.article>li>p
複製**
grid布局的缺點和flex一樣，pc端相容性不是很好，ie9以及ie9以下不支援。
.article>li
.article>li>p
複製**
jquery( document ).ready(function() );
jquery(window).resize(function() );
function setequalheight() ).get();
}複製**
多列等高布局
需求 當兩列的內容變化時，要保證內容相同，且和較長的那列相同。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，最後父元素將超出的部分隱藏，就出現了這個效果。統一稱為最...
布局 多列等高布局方法
多列等高布局在實際應用中比較常見，作為面試的乙個點也常遇到。做個總結。首先想到的第一種就是 flex 和 min height 後朋友提醒，去掉 min height 試試。由於align items預設是 stretch，會將所有元素拉伸到一樣高，所以有了預設等高效果。flex 簡單方便，而且也是...