实例3，使用绝对定位 - 在线编辑器

          <style>
  .container {
    text-align: center;
  }

  .left,
  .right {
    width: 25%;
    float: left;
    background: green;
  }

  .main {
    float: left;
    width: 50%;
    background: black;
    color: white;
  }

  .equal-height {
    position: relative;
  }

  .equal-height .left,
  .equal-height .right {
    position: absolute;
    top: 0;
    bottom: 0; /* 将高度拉到和中间一样高 */
    float: none;
  }

  .equal-height .left {
    left: 0;
  }

  .equal-height .right {
    right: 0;
  }

  .equal-height .main {
    margin: 0 25%;
    float: none;
  }
</style>

<div class="container equal-height">
  <div class="left">
    这是一行内容
  </div>
  <div class="main">
    这是多行内容
    <br>这是多行内容
    <br>这是多行内容
  </div>
  <div class="right">
    这是一行内容
  </div>
</div>

        