两个div左边的宽度设为未知,如何设置右边div是css才能使它充满剩下的全部宽度。
1.要求不能与左边div重叠
2.不使用jq或者js来获取左边div的属性
两者的父元素使用flex布局,然后把右边的flex-grow设为1即可,示例代码如下
<div class="container">
<div class="a">
<p>aaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div class="b"></div>
</div>
.container {
width: 100%;
height: 100px;
border: 1px black solid;
display: flex;
}
.a {
background: red;
}
.b {
flex-grow: 1;
background: blue;
}
可以试试左侧浮动,然后右侧overflow:hidden;
,用产生BFC来进行自适应布局
.left{
float: left;
background: orange;
min-height: 20px;
}
.right{
overflow: hidden;
background: #eee;
min-height: 20px;
}
<div class="left">1212</div>
<div class="right"></div>