如何实现多列等高

今天记录一个多列等高的实现方法。我在这里分享三种方法。我们假设实现四列等高。对于不同的列数n，我们只要设置每一个子元素宽度为100%/n就好。

HTML结构如下：

<div class="parent">
  <div class="child">我爱我的祖国我爱我的祖国</div>
  <div class="child">我爱我的祖国</div>
  <div class="child">我爱我的祖国我爱我的祖国我爱我的祖国</div>
  <div class="child">我爱我的祖国我爱我的祖国我爱我的祖国我爱我的祖国我爱我的祖国我爱我的祖国</div>
</div> 

CSS样式

第一种 浮动+padding与margin抵消

.parent{
   overflow: hidden;
  }
  .child{
    float: left;
    width: 25%;
    background: tomato;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
  }

第二种 利用所有单元格都相等的特性，个人觉得这种方法很直观，好理解

.parent{
   display: table;
  }
  .child{
    display: table-cell;
    width: 25%;
    background: tomato;
  }

第三种 利用display: flex, flex一直都很优秀，但要注意不兼容低版本IE。

.parent{
   display: flex;
  }
  .child{
    width: 25%;
    background: tomato;
  }

有问题欢迎在评论区交流！