Skip to content

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

Published at  at 06:14 PM

display: table-cellalign-items: stretchgrid这些只需要查文档就行了。本文只讲比较难记的一种古代偏方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;
}
Share on: