请问，左右两个div，左边div，宽度有一定变化，采用CSS如何使右边div宽度根据剩余空间自适应宽度，使得总宽度不变？

Question

请问，左右两个div，左边div的宽度每一个不定宽，采用CSS如何使右边div宽度根据剩余空间自适应宽度，使得左边div+右边div总宽度不变？

求高手解。。

<ul>
    <li>
        <div class="left"></div>
        <div class="right"></div>
    </li>
    <li>
        <div class="left"></div>
        <div class="right"></div>
    </li>
    <li>
        <div class="left"></div>
        <div class="right"></div>
    </li>
    <li>
        <div class="left"></div>
        <div class="right"></div>
    </li>
    <li>
        <div class="left"></div>
        <div class="right"></div>
    </li>
</ul>

如图：

Answer 1

我是使用flex属性来做的。左边容器固定宽度，右边自适应，可以在开发者工具下调整左边容器的宽度来查看。

// css
        div {
            height: 500px;
        }
        .grid {
          display: -webkit-flex;
          display: -moz-flex;
          display: -o-flex;
          display: -ms-flex;
          display: flex;
        }
        .col {
          padding: 30px;
        }
        .fluid {
          flex: 1;
          background-color: #ccc;
        }
        .fixed {
          background-color: yellow;
        }

// html

    <div class="grid">
      <div class="col fixed">
        这里有内容啊！
      </div>
      <div class="col fluid">
      </div>
    </div>

Answer 2

不知对高度是啥要求，如果是纯宽度的话，可以考虑 left左浮动，right生成新的BFC做法（例如，设置overflow非visible）。

Answer 3

flex float都能搞定的

Answer 4

左边宽度动态变化，右边宽度自适应，且等高垂直居中布局

demo:http://runjs.cn/detail/4gkbpvds

Answer 5

display:table-cell 可以解决

Answer 6

刚刚遇到一个类似的, 整了一个解决方案 ---

父级 display: flex
左侧 float: left
右侧 flex: 1

实现效果为 --- 左侧宽度自适应, 右侧占满剩余部分