使用 flex 布局可以非常简单的实现三列，多列的效果，唯一要考虑的就是兼容性问题。 - 在线编辑器

CSS 布局
实现CSS三栏自适应布局的5种方法
使用 flex 布局可以非常简单的实现三列，多列的效果，唯一要考虑的就是兼容性问题。

          <style>
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 200px;
    line-height: 200px;
    text-align: center;
  }

  .left,
  .right {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100px;
    flex: 0 0 100px;
    background: green;
  }

  .main {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    background: black;
    color: white;
  }
</style>

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="main">中间自适应</div>
  <div class="right">右边固定宽度</div>
</div>

        