我們在寫頁面的時候，有的時候會遇到多欄佈局，每個欄目裡面的內容有的時候可能不一樣，這樣就會導致每個欄目實際的高度也是不一樣的，如果每個欄目有背景顏色的，就會導致每個欄目的底部是對不齊的，用戶體驗不是很好！
實際的問題效果如下所示：
需求效果如下:
我們要實現的效果就是不管每個欄目的實際內容多少，都要保證每個欄目是對齊的。
如果想學習更多前端開發教程，歡迎關注公眾號：網頁前端開發學習，每天更新更多新內容哦！
如何解決
HTML代碼如下所示：
（1）純CSS方式解決
CSS代碼如下所示:
分析說明：
1.元素設置的padding-bottom儘可能大一些，並且需要設置一樣大小的margin-bottom負值去抵消padding-bottom撐大的區域，正負一抵消，對於頁面佈局不會有影響。
2.還需要設置父元素overflow：hidden把子元素多出來的色塊背景隱藏掉
這樣的CSS解決方法沒有任何兼容性問題，可以大方放心使用
（2）js方式解決
除了說用CSS解決，我們也需要了解一下JS實現解決問題。
js代碼如下所示:
好的，今天就給大家講這個小技巧，等高佈局對於我們前端開發來說，是非常重要的一個佈局方法，可以幫助我們提高用戶體驗。
如果想學習更多前端開發教程，歡迎關注公眾號：網頁前端開發學習，每天更新更多新內容哦！
分享到:
閱讀更多 WEB開發李家靖 的文章
