请问,左右两个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>
如图:
我是使用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>
flex float都能搞定的
左边宽度动态变化,右边宽度自适应,且等高垂直居中布局
demo:http://runjs.cn/detail/4gkbpvds
不知对高度是啥要求,如果是纯宽度的话,可以考虑 left
左浮动,right
生成新的BFC做法(例如,设置overflow非visible)。