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

如图:

图片描述

阅读 15.9k
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>

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

flex float都能搞定的

display:table-cell 可以解决

新手上路,请多包涵

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏