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

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

高洛峰 2017-04-17 11:35:38

[HTML讨论组]

710

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

求高手解。。

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

如图：

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(4)

PHP中文网2017-04-17 11:37:38 4楼

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

// css
        p {
            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

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