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