常用的多列等高佈局收藏

斕曦發表於2018-05-31

1、文章引言

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

常用的多列等高佈局收藏

2、需求如下

我們要實現的效果就是當各個欄目內容不一樣的情況下，保證各個欄目還是對齊的。想要實現的效果如下圖所示：

常用的多列等高佈局收藏

3、如何解決

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>複製程式碼

1、使用負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把子元素多出來的色塊背景隱藏掉。

2、模仿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元素預設就是等高的。

3、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以下不支援。

4、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以下不支援。

5、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) );
}
複製程式碼

6、小結

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


相關文章