CSS如何實(shí)現(xiàn)多列等高布局

這篇文章給大家分享的是有關(guān)CSS如何實(shí)現(xiàn)多列等高布局的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了揭西免費(fèi)建站歡迎大家使用！

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代碼如下所示：

    
      

      一家將客戶利益置于首位的經(jīng)紀(jì)商，
      為客戶提供專業(yè)的交易工具一家將客戶利益置于首位的經(jīng)紀(jì)商，
      為客戶提供專業(yè)的交易工具一家將客戶利益置于首位的經(jīng)紀(jì)商，
      為客戶提供專業(yè)的交易工具一家將客戶利益置于首位的經(jīng)紀(jì)商，為客戶提供專業(yè)的交易工具
      
    
    
      
一家將客戶利益置于首位的經(jīng)紀(jì)商，為客戶提供專業(yè)的交易工具
      一家將客戶利益置于首位的經(jīng)紀(jì)商，為客戶提供專業(yè)的交易工具
    
    
      
一家將客戶利益置于首位的經(jīng)紀(jì)商
    
  

（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);
}

感謝各位的閱讀！關(guān)于“CSS如何實(shí)現(xiàn)多列等高布局”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

當(dāng)前標(biāo)題：CSS如何實(shí)現(xiàn)多列等高布局
文章源于：http://m.jiaotiyi.com/article/ppoois.html