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

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

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

  .left {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 200px;
    flex: 0 0 200px; /* 不缩小，不扩大，基础宽度200px */
    background: green;
  }

  .main {
    background: black;
    color: white;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto; /* 按需缩小，扩大，基础宽度自适应 */
  }
</style>

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

        