场景模拟:
现在有一个父容器,里面有俩个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;
}
俩个代码实现的效果是一样的,效果图如下: