等高布局老是忘？多半是废了

display: table-cell、align-items: stretch、grid这些只需要查文档就行了。本文只讲比较难记的一种古代偏方Hack思路 。Demo

任务拆分

等高分为以下2步：

1. 顶部对齐
2. 消除高度差

实操

第一步：顶部对齐

可以选择vertical-algin:

.content {
  display: inline-block;
  vertical-align: top;
}

也可以用float:

.content {
  float: left;
}

第二步：消除高度差

两条路：

• 把长的截短
• 把短的补长

很明显前者容易出bug，所以我们选择把短的补长。

1.用padding-bottom增加到足够高度：

.content {
  float: left;
+ padding-bottom: 9999px;
}

2.这样无疑也会把父元素撑得很高，再用等量的margin-bottom负值收缩父元素的高度：

.content {
  float: left;
  padding-bottom: 9999px;
+ margin-bottom: -9999px;
}

3.虽说父元素的高度收回来了，但是还是要把多余的内容隐藏：

.container {
  overflow: hidden;
}