前端應該掌握的CSS實現多列等高布局技巧
發(fā)布時間：2018-06-05 15:23:04 作者：yuanyong 
我要評論
我要評論我們在寫頁面的時候，有的時候會遇到多欄布局，這篇文章主要介紹了前端應該掌握的CSS實現多列等高布局技巧，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
1、引言
我們在寫頁面的時候，有的時候會遇到多欄布局，每個欄目里面的內容有的時候可能不一樣，這樣就會導致每個欄目實際的高度也是不一樣的，如果每個欄目有背景顏色的，就會導致每個欄目的底部是對不齊的，用戶體驗不是很好！
實際的問題效果如下所示：
2、需求如下
我們要實現的效果就是不管每個欄目的實際內容多少，都要保證每個欄目是對齊的。
3、如何解決
HTML代碼如下所示：
<ul class="Article">
<li class="js-equalheight">
<p>
一家將客戶利益置于首位的經紀商，
為客戶提供專業(yè)的交易工具一家將客戶利益置于首位的經紀商，
為客戶提供專業(yè)的交易工具一家將客戶利益置于首位的經紀商，
為客戶提供專業(yè)的交易工具一家將客戶利益置于首位的經紀商，為客戶提供專業(yè)的交易工具
</p>
</li>
<li class="js-equalheight">
<p>一家將客戶利益置于首位的經紀商，為客戶提供專業(yè)的交易工具
一家將客戶利益置于首位的經紀商，為客戶提供專業(yè)的交易工具</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撐大的區(qū)域，正負一抵消，對于頁面布局不會有影響。另外的話還需要設置父元素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);
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了css設置多列等高布局的方法示例的相關資料，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-21- 這篇文章給大家介紹了三個小節(jié)的內容，其中包括關于css3中flexbox需要掌握的概念、flexbox實現水平垂直居中對齊和三列等高自適應頁腳區(qū)域黏附底部的布局，有需要的可以參考2016-09-12
- 下面小編就為大家?guī)硪黄獪\析CSS等高布局的6種方式。小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-04
- 頁面布局中經常遇到等高布局的情況，為了得到更好的視覺效果，就要實現DIV等高布局的效果。以最普遍的DIV三列布局來說2014-09-03
- 這種情況下就需要兩列的高度保持一致了，左邊高度增加，右邊也跟著增加，右邊高度增加，左邊同樣也要增加，否則就會出現“斷層”的效果,接下來將介紹多列等高的實現方法，2012-12-03
- CSS網頁布局實例:三欄等高布局.2009-08-29
- 網頁制作Webjx文章簡介：為了讓網頁更美觀、協調，有的時候需要用到左右等到布局，傳統的等高布局是用 javascript 實現的，現在來看看 silence 發(fā)明的真正的 CSS 實現的等2009-04-02
- 三列等高CSS布局的一個實例， 修改國外的一個demo， 兼容到了IE5.5 和標準的瀏覽器OperaFirefoxSafari。 不過hack太多，不是很喜歡這樣做。 全部代碼如下2008-10-17
本文講的等高布局是在不手動設置元素高度的情況下，使用純css實現各個元素高度都相當的效果，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看2019-01-09
