css布局篇——多列等高布局

1、问题

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

需求

我们要实现的效果就是当各个栏目内容不一样的情况下，保证各个栏目还是对齐的。想要实现的效果如下图所示：

解决方法

1、使用负margin-bottom和正padding-bottom对冲实现

      <ul>
        <li>
          <p>
            多列等高布局多列等高布局多列等高布局多列等高布局多列等高布局
            多列等高布局多列等高布局多列等高布局多列等高布局多列等高布局
            多列等高布局多列等高布局多列等高布局多列等高布局多列等高布局
            多列等高布局多列等高布局多列等高布局多列等高布局多列等高布局
            多列等高布局多列等高布局多列等高布局多列等高布局多列等高布局
          </p>
        </li>
        <li>
          <p>
            多列等高布局多列等高布局多列等高布局多列等高布局多列等高布局
            多列等高布局多列等高布局多列等高布局
          </p>
        </li>
        <li>
          <p>多列等高布局多列等高布局多列等高布局</p>
        </li>
      </ul>

      ul {
        overflow: hidden;
        list-style: none
      }

      ul > li {
        float: left;
        margin: 0 10px -9999px 0;
        padding-bottom: 9999px;
        background: #ccc;
        width: 200px;
      }

      ul > li > p {
        padding: 10px;
      }

元素设置的padding-bottom尽可能大一些，并且需要设置一样大小的margin-bottom负值去抵消padding-bottom撑大的区域，正负一抵消，对于页面布局不会有影响。另外的话还需要设置父元素overflow：hidden把子元素多出来的色块背景隐藏掉。

2、模仿table布局

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

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

ul>li>p {
  padding: 10px;
}

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

3、flex布局

ul {
  display: flex;
}

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

ul>li>p {
  padding: 10px;
}

flex中的伸缩项目默认为拉伸为父元素的高度，同样可以实现等高效果。在pc端兼容性不是很好，在ie9以及ie9以下不支持。

4、grid布局

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

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

ul>li>p {
  padding: 10px;
}

grid布局的缺点和flex一样，pc端兼容性不是很好，ie9以及ie9以下不支持。