实例4，使用 flex - 在线编辑器

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

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

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

  .equal-height {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
  }

  .equal-height .left,
  .equal-height .right {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%; /* 不缩小，不扩大，基础宽度为25% */
    background: green;
  }

  .equal-height .main {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%; /* 不缩小，不扩大，基础宽度为50% */
    background: black;
    color: white;
  }
</style>

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

        