其实在实际应用中,等高布局的场景并不是很多。当然,很多设计图在背景上的区分要求布局至少是视觉上的等高,甚至有的布局会要求是真正的等高才能实现。比如
https://www.tigerbrokers.com/activity/zhitongche/201510/
中的虚线部分的实现。这个页面实现了视觉等高,又比如
https://www.tigerbrokers.com/activity/ztc201509/
中的轨道部分。为了在拐角部分能够完美的拼接,则需要在切图上有一些更加细节的操作,因此需要实现真正的等高才行。好在该页面只需要在移动端显示,因此使用弹性盒模型来实现就OK了。

该页面的实现并没有完美拼接。主要是当然做的时候没有注意这个问题,因此就随便弄了一些就忽悠过去了。以后我会重新实现这个页面

1. 视觉等高实现之绝对定位

html 代码

  <div class="outer">
  <div class="left">
    <div class="equh"></div>
    <div class="left-con">
      <p>left</p>
      <p>left</p>
      <p>left</p>
    </div>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
  </div>
</div>

css 代码

  .outer {
  width: 960px;
  margin: 0 auto;
  border: 1px solid #000;
  overflow: hidden;
  background-color: green;
  color: #fff;
}
.left {
  width: 200px;
  position: relative;
  float: left;
}
.equh {
  width: 100%;
  height: 999em;
  position: absolute;
  left: 0;
  top: 0;
  border-right: 1px solid #000;
  background-color: orange;
}

.left-con {
  padding: 1em;
  position: relative;
  z-index: 1;
}
.right {
  padding: 1em;
  overflow: hidden;
}


实例地址: http://codepen.io/anon/pen/eJXPWo

2. 视觉等高实现之padding-bottom与margin-bottom

核心代码

  padding-bottom: 9999px;
margin-bottom: -9999px;

html 代码

  <div class="box">
  <div class="sub">
    <p>a</p>
  </div>
  <div class="sub">
    <p>b</p>
    <p>b</p>
  </div>
  <div class="sub">
    <p>c</p>
    <p>c</p>
    <p>c</p>
  </div>
</div>

css 代码

  .box {
  width: 600px;
  overflow: hidden;
  margin: 10px auto;
  border: 1px solid #888;
}
.sub {
  float: left;
  width: 30%;
  margin-right: 3%;
  border: 1px solid orange;
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

实例地址: http://codepen.io/anon/pen/WrmYjq

3. 真实等高实现之table-cell

该方案利用了所有单元格高度都相等的特性,不过由于ie6/7不支持该属性,因此略有瑕疵。不过总的来说还是非常不错的方案。

html代码

  <div class="box">
  <div class="row">
    <div class="cell">你一定也有过这种感觉的。当你心事重重,渴望找一个人聊一聊的时候,那个可以聊的人来了,可是你们却并没有聊什么。当然,聊是聊了,可是他聊他的,你也试着开始聊你的,只是到后来,你放弃了……那么,最后的办法就是静下来,啃啮自己的寂寞。或者反过来说,让寂寞来吞噬你。------罗兰《寂寞的感觉》</div>
    <div class="cell">作为一个被基阿异捅过两个大血窟窿的人。告诉后来的基友们一句:一命二运三风水,四积阴功五读书。</div>
    <div class="cell">奔波了一天,收到了无数的生日快乐,享受了电影见面会现场各种形式的祝福和礼物,以及场面宏大的生日快乐歌,感谢<西风烈>,感谢支持我的朋友们!现在机场举长寿面祝你们都永远幸福快乐!</div>
  </div>
</div>

css 代码

  .box {
  width: 600px;
  margin: 40px auto;
  font-size: 12px;
}
.row {
  display: table-row;
  overflow: hidden;
}
.cell {
  display: table-cell;
  width: 30%;
  padding: 1.6%;
  background-color: #f5f5f5;
  // 在IE6/7下使用上一方法,添加一些hack即可,这样就能做到全部兼容了
  *float: left;
  *padding-bottom: 9999px;
  *margin-bottom: -9999px;
}

实例地址: http://codepen.io/anon/pen/PZLyLe

4. 真实等高实现之弹性盒模型

如果不考虑兼容性的问题,那么这个就简单多了
html 代码

  <div class="box">
  <div class="cell">你一定也有过这种感觉的。当你心事重重,渴望找一个人聊一聊的时候,那个可以聊的人来了,可是你们却并没有聊什么。当然,聊是聊了,可是他聊他的,你也试着开始聊你的,只是到后来,你放弃了……那么,最后的办法就是静下来,啃啮自己的寂寞。或者反过来说,让寂寞来吞噬你。------罗兰《寂寞的感觉》</div>
  <div class="cell">作为一个被基阿异捅过两个大血窟窿的人。告诉后来的基友们一句:一命二运三风水,四积阴功五读书。</div>
  <div class="cell">奔波了一天,收到了无数的生日快乐,享受了电影见面会现场各种形式的祝福和礼物,以及场面宏大的生日快乐歌,感谢<西风烈>,感谢支持我的朋友们!现在机场举长寿面祝你们都永远幸福快乐!</div>
</div>

css 代码

  .box {
  width: 600px;
  margin: 20px auto;
  display: flex;
}
.cell {
  width: 30%;
  border: 1px solid red;
}

实例地址: http://codepen.io/anon/pen/XXGygN

总结

如果需要兼容到ie6/ie7,则使用方法三即可,其中结合了方法二的思路。如果仅仅只是移动端的h5页面的实现,那么毫不犹豫的使用弹性盒模型来实现。简单高效。

当然还有很多各种花样的等高布局啦,不过自我感觉这几种方法已经能够完全满足日常需求,所以我就总结到这里了。