1、父元素内有两个子元素，其中一个元素宽度已知，另一个元素填满父级剩余宽度，这种情况可以用 calc() 来实现。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*清除浮动*/
.clearfix {
zoom: 1;
}
.clearfix:after {
clear: both;
display: block;
content: '';
}
.father {
width: 300px;
height: 100px;
background: gainsboro;
}
.child_one {
width: 50px;
height: 50px;
background: blueviolet;
float: left;
}
.child_two {
/*注意'-'的左右要加空格*/
width: calc(100% - 50px);
height: 60px;
background: red;
float: left;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="child_one"></div>
<div class="child_two"></div>
</div>
</body>
</html>效果如下
2、父元素内有两个子元素，其中一个元素宽度不确定，另一个元素要填满父级剩余宽，可以用弹性盒模型中的 flex-grow 这一属性来实现
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.father {
width: 300px;
height: 100px;
background: gainsboro;
display: flex;
justify-content: flex-start;
/*这也是一个很好用的属性,可以让子元素在交叉轴(垂直方向)居中显示*/
align-items: center;
}
.child_one {
background: blueviolet;
}
.child_two {
height: 60px;
background: red;
/*设置该元素索取父级剩余宽度*/
flex-grow:1;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="child_one">child_one</div>
<div class="child_two"></div>
</div>
</body>
</html>效果如下
关于 flex-grow 这个属性，可以参考下这篇博客 https://blog.csdn.net/m0_37058714/article/details/80765562
版权声明：本文为qq_41506821原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。