请问,左右两个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 web前端开发 html5

悲剧D团子 9 years, 10 months ago

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

活到老宅到老 answered 9 years, 10 months ago

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

含巨大长茎 answered 9 years, 10 months ago

flex float都能搞定的

BD-艾斯 answered 9 years, 10 months ago

Your Answer