css自动填满父级剩余宽度

最新推荐文章于 2024-05-14 14:30:19 发布

这是我家帅狗咋

最新推荐文章于 2024-05-14 14:30:19 发布

阅读量4.6k

点赞数 2

分类专栏： html

本文链接：https://blog.csdn.net/qq_41506821/article/details/86465927

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>

效果如下