经常使用的多列等高布局收藏

一、文章引言

咱们在写页面的时候，常常会遇到多栏布局的状况，若是栏目带有背景色而且栏目内容高度不同的话，就会致使每一个栏目的底部是没法不齐的，这样在排版布局以及给用户的体验不是很好！实际的问题效果以下图所示：

二、需求以下

咱们要实现的效果就是当各个栏目内容不同的状况下，保证各个栏目仍是对齐的。想要实现的效果以下图所示：

三、如何解决

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) );
}
复制代码

六、小结

若是有什么疑问或者更好的建议，欢迎在评论区留言。文笔有限，文中如有不正之处，万望告知！