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