请问，左右两个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>
如图：
悲剧D团子
9 years, 9 months ago
Answers
我是使用
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, 9 months ago
