經常使用的多列等高佈局收藏

一、文章引言

咱們在寫頁面的時候，常常會遇到多欄佈局的狀況，若是欄目帶有背景色而且欄目內容高度不同的話，就會致使每一個欄目的底部是沒法不齊的，這樣在排版佈局以及給用戶的體驗不是很好！實際的問題效果以下圖所示：

二、需求以下

咱們要實現的效果就是當各個欄目內容不同的狀況下，保證各個欄目仍是對齊的。想要實現的效果以下圖所示：

三、如何解決

HTML結構代碼以下所示：

<ul class="Article">
    <li class="js-article-item">
      <p>
      一家將客戶利益置於首位的經紀商，
      爲客戶提供專業的交易工具一家將客戶利益置於首位的經紀商，
      爲客戶提供專業的交易工具一家將客戶利益置於首位的經紀商，
      爲客戶提供專業的交易工具一家將客戶利益置於首位的經紀商，爲客戶提供專業的交易工具
      </p>
    </li>
    <li class="js-article-item">
      <p>一家將客戶利益置於首位的經紀商，爲客戶提供專業的交易工具
      一家將客戶利益置於首位的經紀商，爲客戶提供專業的交易工具</p>
    </li>
    <li class="js-article-item">
      <p>一家將客戶利益置於首位的經紀商</p>
    </li>
  </ul>複製代碼

一、使用負margin-bottom和正padding-bottom對衝實現

.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撐大的區域，正負一抵消，對於頁面佈局不會有影響。另外的話還須要設置父元素overflow：hidden把子元素多出來的色塊背景隱藏掉。

二、模仿table佈局

.Article {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.Article>li {
  display: table-cell;
  width: 200px;
  border-left: solid 5px currentColor;
  border-right: solid 5px currentColor;
  color: #fff;
  background: #4577dc;
}

.Article>li>p {
  padding: 10px;
}
複製代碼

table元素中的table-cell元素默認就是等高的。

三、flex佈局

.Article {
  display: flex;
}

.Article>li {
  flex: 1;
  border-left: solid 5px currentColor;
  border-right: solid 5px currentColor;
  color: #fff;
  background: #4577dc;
}

.Article>li>p {
  padding: 10px;
}
複製代碼

flex中的伸縮項目默認爲拉伸爲父元素的高度，一樣能夠實現等高效果。在pc端兼容性不是很好，在ie9以及ie9如下不支持。

四、grid佈局

.Article {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 20px;
}

.Article>li {
  border-left: solid 5px currentColor;
  border-right: solid 5px currentColor;
  color: #fff;
  background: #4577dc;
}

.Article>li>p {
  padding: 10px;
}
複製代碼

grid佈局的缺點和flex同樣，pc端兼容性不是很好，ie9以及ie9如下不支持。

五、js計算

.Article>li {
  float: left;
  border: solid 5px #fff;
  width: 33%;
  color: #fff;
  font-size: 16px;
  background: #4577dc;
}

.Article>li>p {
  padding: 10px;
}
複製代碼

jQuery( document ).ready(function() {
  setEqualheight();
});

jQuery(window).resize(function() {
  jQuery('.js-article-item').css('height','auto');
  setEqualheight();
});

function setEqualheight() {
  var height = jQuery(".js-article-item").map(function() {
    return jQuery(this).height();
  }).get();

  jQuery(".js-article-item").height( Math.max.apply(null, height) );
}
複製代碼

六、小結

若是有什麼疑問或者更好的建議，歡迎在評論區留言。文筆有限，文中如有不正之處，萬望告知！