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