场景模拟:

现在有一个父容器,里面有俩个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;
}

俩个代码实现的效果是一样的,效果图如下:
在这里插入图片描述

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐