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

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

1、引言

我們?cè)趯戫撁娴臅r(shí)候，有的時(shí)候會(huì)遇到多欄布局，每個(gè)欄目里面的內(nèi)容有的時(shí)候可能不一樣，這樣就會(huì)導(dǎo)致每個(gè)欄目實(shí)際的高度也是不一樣的，如果每個(gè)欄目有背景顏色的，就會(huì)導(dǎo)致每個(gè)欄目的底部是對(duì)不齊的，用戶體驗(yàn)不是很好！

實(shí)際的問題效果如下所示：

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

分析說明：元素設(shè)置的padding-bottom盡可能大一些，并且需要設(shè)置一樣大小的margin-bottom負(fù)值去抵消padding-bottom撐大的區(qū)域，正負(fù)一抵消，對(duì)于頁面布局不會(huì)有影響。另外的話還需要設(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);
}

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