实例1，使用 display: table - 在线编辑器

          <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: table;
    table-layout: fixed;
    width: 100%;
  }

  .equal-height > div {
    display: table-cell;
    float: none;
  }
</style>

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

        