1、引言
我們在寫頁面的時候，有的時候會遇到多欄布局，每個欄目里面的內容有的時候可能不一樣，這樣就會導致每個欄目實際的高度也是不一樣的，如果每個欄目有背景顏色的，就會導致每個欄目的底部是對不齊的，用戶體驗不是很好！
實際的問題效果如下所示：
2、需求如下
我們要實現的效果就是不管每個欄目的實際內容多少，都要保證每個欄目是對齊的。
3、如何解決
HTML代碼如下所示：
| <ul class="Article"> <li class="js-equalheight"> <p> 一家將客戶利益置于首位的經紀商， 為客戶提供專業的交易工具一家將客戶利益置于首位的經紀商， 為客戶提供專業的交易工具一家將客戶利益置于首位的經紀商， 為客戶提供專業的交易工具一家將客戶利益置于首位的經紀商，為客戶提供專業的交易工具 </p> </li> <li class="js-equalheight"> <p>一家將客戶利益置于首位的經紀商，為客戶提供專業的交易工具 一家將客戶利益置于首位的經紀商，為客戶提供專業的交易工具</p> </li> <li class="js-equalheight"> <p>一家將客戶利益置于首位的經紀商</p> </li> </ul> |
（1）純CSS方式解決
CSS代碼如下所示:
| .Article{ overflow: hidden;}.Article>li{ float: left; margin: 0 10px -9999px 0; padding-bottom: 9999px; background: #4577dc; width: 200px; color: #fff;}.Article>li>p{ padding: 10px;} |
分析說明：元素設置的padding-bottom盡可能大一些，并且需要設置一樣大小的margin-bottom負值去抵消padding-bottom撐大的區域，正負一抵消，對于頁面布局不會有影響。另外的話還需要設置父元素overflow：hidden把子元素多出來的色塊背景隱藏掉，上述CSS解決方法沒有任何兼容性問題，可以放心使用哈。
（2）js方式解決
js代碼如下所示:
| jQuery( document ).ready(function() { equalheight();});jQuery(window).resize(function() { jQuery('.js-equalheight').css('height','auto'); equalheight();});function equalheight() { var heights = jQuery(".js-equalheight").map(function() { return jQuery(this).height(); }).get(), maxHeight = Math.max.apply(null, heights); jQuery(".js-equalheight").height(maxHeight);} |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
