而我们期待的效果如同第二个三列结构，两边的列能和中间一列一样高。而且不管任何一列内容是最多时，三列总是一样高的。 - 在线编辑器

CSS 布局
实现CSS等高布局的5个实例
而我们期待的效果如同第二个三列结构，两边的列能和中间一列一样高。而且不管任何一列内容是最多时，三列总是一样高的。

          <style>
  .container {
    text-align: center;
  }
  
  .left, .right {
    width: 25%;
    float: left;
    background: green;
  }
  
  .main {
    float: left;
    width: 50%;
    background: black;
    color: white;
  }
  
  .clearfix {
    clear: both;
  }

  .equal-height {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

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

<p>存在的问题</p>
<div class="container">
  <div class="left">这是一行内容</div>
  <div class="main">
    这是多行内容
    <br>这是多行内容
    <br>这是多行内容
  </div>
  <div class="right">这是一行内容</div>
</div>

<div class="clearfix"></div>

<p>希望达到的效果</p>
<div class="container equal-height">
  <div class="left">这是一行内容</div>
  <div class="main">
    这是多行内容
    <br>这是多行内容
    <br>这是多行内容
  </div>
  <div class="right">这是一行内容</div>
</div>

        