让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;
}

俩个代码实现的效果是一样的,效果图如下:
让div占据父元素剩下的所有位置

上一篇:《 css布局》


下一篇:解决字母或数字溢出盒子(文字超出时不自动换行)