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

请问，左右两个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>

如图：

图片描述

css3 前端

html5

阅读 15.8k

6 个回答

✓ 已被采纳

我是使用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>