让div占据父元素剩下的所有位置
场景模拟:现在有一个父容器,里面有俩个div,左边的要给一个固定的200px的宽度,父容器剩下的宽度都归右边的div该怎么完成?HTML代码:<div class="wrap"><div class="left"></div><div class="right">CSDN吴小迪</div></div>...
·
场景模拟:
现在有一个父容器,里面有俩个div,左边的要给一个固定的200px的宽度,父容器剩下的宽度都归右边的div该怎么完成?
HTML代码:
<div class="wrap">
<div class="left"></div>
<div class="right">CSDN吴小迪</div>
</div>
解决问题的方法:
一:CSS3弹性盒
CSS代码:
.wrap{
display: flex;
background: green;
}
.left{
height: 100px;
width: 200px;
background: yellow;
}
.right{
height: 100px;
flex: 1;
background: orangered;
}
二:给左边元素一个浮动
CSS代码:
.left{
height: 100px;
width: 200px;
background: yellow;
float: left;
}
.right{
height: 100px;
background: orangered;
}
俩个代码实现的效果是一样的,效果图如下:
更多推荐
已为社区贡献4条内容
所有评论(0)