css实现多列等高

前言

本文是在阅读了这篇文章后，对其内容添加了一些自己的注释和理解产生的，主要方便自己查看
要实现的效果：

解决

布局：

<ul class="Article">
    <li class="js-article-item">
    <p>
        《山楂树之恋》是由张艺谋执导，周冬雨、窦骁等主演的爱情片，该片于2010年9月16日在中国内地上映。
        该片根据艾米的同名小说改编，讲述了静秋、老三之间相识、相恋，最后天人永隔的故事。
        该片入围柏林国际电影节水晶熊和香港金像奖最佳亚洲电影，并获得华表奖优秀故事片奖。
        2018年8月18日，被评为改革开放40周年中国十大优秀爱情电影。
    </p>
    </li>
    <li class="js-article-item">
    <p>
        《山楂树之恋》是由张艺谋执导，周冬雨、窦骁等主演的爱情片，该片于2010年9月16日在中国内地上映。
        该片根据艾米的同名小说改编，讲述了静秋、老三之间相识、相恋，最后天人永隔的故事。
    </p>
    </li>
    <li class="js-article-item">
    <p>
        《山楂树之恋》是由张艺谋执导，周冬雨、窦骁等主演的爱情片，该片于2010年9月16日在中国内地上映。
    </p>
    </li>
</ul>

方法1：内外边距

需要确定元素宽度，如果需要元素跟随窗口大小自适应变化，需要结合js实现

利用padding-bottom|margin-bottom正负值相抵，不会影响页面布局的特点。设置父容器设置超出隐藏overflow: hidden，这样父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。

<style>
    * {