纯css实现同行不等高块状元素自适应内容动态保持高度一致

发表于
本文字数： 3.3k 阅读时长 ≈ 3 分钟

多种方法可实现同行不等高块状元素自适应内容动态保持高度一致，即高度为其中最高的块元素高度。

display:flex;（推荐）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
  <style>
    main {
      display: flex;
    }
    div {
      width: 100px;
      border: #333 1px solid;
      /* height: auto; */
    }
    .a {
      position: relative;
    }
    .p {
      position: absolute;
      bottom: 10px;
    }
  </style>
  <main>
    <div class="a">
      第一个块
      <div class="p">下边</div>
    </div>
    <div class="b">第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块</div>
    <div>第三个块</div>
  </main>
</body>

flex

  • 能自适应保持与最高块元素高度一致。
  • 块内可随意布局，如块内子元素 p 可与块元素 a 的下边保持固定间距。
  • 可自适应两个及以上的块元素。

display: -webkit-box; （推荐）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
  <style>
    main {
      display: -webkit-box;
    }
    div {
      width: 100px;
      border: #333 1px solid;
      /* height: auto; */
    }
    .a {
      position: relative;
    }
    .p {
      position: absolute;
      bottom: 10px;
    }
  </style>
  <main>
    <div class="a">
      第一个块
      <div class="p">下边</div>
    </div>
    <div class="b">第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块</div>
    <div>第三个块</div>
  </main>
</body>

box

  • 能自适应保持与最高块元素高度一致。
  • 块内可随意布局，如块内子元素 p 可与块元素 a 的下边保持固定间距。
  • 可自适应两个及以上的块元素。
  • 需考虑兼容性问题。

table（推荐）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
  <style>
    main {
      display: table;
    }
    div {
      width: 100px;
      border: #333 1px solid;
      display: table-cell;
    }
    .a {
      position: relative;
    }
    .p {
      position: absolute;
      bottom: 10px;
    }
  </style>
  <main>
    <div class="a">
      第一个块
      <div class="p">下边</div>
    </div>
    <div class="b">第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块</div>
    <div>第三个块</div>
  </main>
</body>

table

  • 需将子块元素的 display 固定为 table-cell，如果需要其他类型布局还需要再加一层 div。
  • 能自适应保持与最高块元素高度一致。
  • 块内可随意布局，如块内子元素 p 可与块元素 a 的下边保持固定间距。
  • 可自适应两个及以上的块元素。

padding + 负 margin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>
  <style>
    main {
      overflow: hidden;
    }
    div {
      width: 100px;
      border: #333 1px solid;
      float: left;
      padding-bottom: 10000px;
      margin-bottom: -9990px;
    }
    .a {
      position: relative;
    }
    .p {
      position: absolute;
      bottom: 10px;
    }
  </style>
  <main>
    <div class="a">
      第一个块
      <div class="p">下边</div>
    </div>
    <div class="b">第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块</div>
    <div>第三个块</div>
  </main>
</body>

负 margin

  • 通过设置 margin-bottom 负值抵消设置的 padding-bottom。
  • 能自适应保持与最高块元素高度一致。
  • 可自适应两个及以上的块元素。
  • 不能随意布局，下方会被卷去，故无法将元素与块元素的下边保持固定间距（如 p）。

position:absolute

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<body>
  <style>
    main {
      position: relative;
    }
    div {
      width: 100px;
      border: #333 1px solid;
    }
    .p {
      position: absolute;
      bottom: 10px;
    }
    .b {
      position: absolute;
      top: 0;
      left: 100px;
      height: 100%;
    }
    .c {
      position: absolute;
      top: 0;
      left: 200px;
      height: 100%;
    }
  </style>
  <main>
    <div class="a">第一个块第一个块第一个块第一个块第一个块第一个块第一个块第一个块第一个块第一个块</div>
    <div class="b">
      第二个块
      <div class="p">下边</div>
    </div>
    <div class="c">
      第三个块
      <div class="p">下边</div>
    </div>
  </main>
</body>

absolute

  • 通过设置 position: absolute 和 height: 100% 来与参考元素高度保持一致。
  • 只能自适应与参考元素高度一致（如 b、c 与 a 一致）,不能相互自适应。
  • 可自适应两个及以上的块元素。

总结

一般情况用 flex 布局就行，兼容老机型用 table 布局。