CSS - 同一行的元素高度统一

# 一：flex 大法 ## 步骤 1. 设置外部容器 `display: flex;` 2. 设置内部容器 `align-items: stretch;` ## 原理 > ## 示例

img1 120*200

img2 120*300

img3 120*150

# 二：padding 补偿法 网上搜了一下发现这种方法居然有这种这个高大上的名词。。 ## 步骤 1. 设置外部容器超出隐藏：`overflow: hidden;` 2. 设置内部容器一个很大的 padding-bottom 和负 margin-bottom：`margin-bottom:-10000px; padding-bottom:10000px;` ## 原理 > > CSS 的 margin-bottom 属性用于设置元素的底部外边距，允许设置负数值。一个正数值将让它相对于正常流与邻近块更远，而负数值将使得更近。 我的理解是用 padding-bottom 把外部容器撑开（外部容器设置了 overflow: hidden; 已经创建 BFC），然后负的 margin-bottom 并不会将元素实际高度改变，只会改变这个容器计算时的高度，这样外部容器的高度计算时就为最高内部容器高度了。 ## 示例

img1 120*200

img2 120*300

img3 120*150

# 三：table 布局 相当于用 HTML 的 table 元素 ## 步骤 1. 设置外部容器 `display: table;` 2. 设置内部容器 `display: table-cell;` ## 原理 > ## 示例

img1 120*200

img2 120*300

img3 120*150