一排有2个div,其中右边的宽度固定,怎么让左边的div自动填满剩余的宽度?不用js实现
flex
rightBox { float:right } .leftBox { position:absolute; left:0; right: .rightBox.width() }
rightBox { float:right; } .leftBox { padding-right: .rightBox.width() }
<style type="text/css">
#container {
width: 900px;
height: 400px;
background: #f5f5f5;
position: relative;
padding-right: 300px;
}
#right {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 300px;
background: #e5e5e5;
}
</style>
<div id="container">
<div id="left">这是左侧宽度自适应内容区域</div>
<div id="right">这是右侧固定宽度300px的区域</div>
</div>
以上DEMO中需要注意的有如下几点:
container 的定位需要为 relative (或者absolute、fixed也可以),其次,padding-right 设置的宽度为右边DIV的宽度;
通过absolute绝对定位为 #right 右侧DIV进行定位显示
#sidebar{
background:red;
float:right;
width:300px;
}
#content{
background:green;
margin-right:300px;
}
.th{
height:100px;
background:gray;
}
#footer{
background:gray;
height:100px;
}
<div id="wrap">
<div id="sidebar" style="height:240px;">固定宽度区</div>
<div id="content" style="height:340px;">自适应区</div>
</div>
<div id="footer">后面的一个DIV,以确保前面的定位不会导致后面的变形</div>
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
如果考虑dom顺序的话可以