右边固定宽度，左边自适应

最新推荐文章于 2024-04-26 15:21:52 发布

persist_xyz

最新推荐文章于 2024-04-26 15:21:52 发布

阅读量489

点赞数

文章标签： css flex

本文链接：https://blog.csdn.net/persist_xyz/article/details/87895064

版权

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>右边固定宽度，左边自适应</title>
	<style>
		div{
			height: 200px;
		}
		/* 第一种
		.left{
			float: right;
			width: 200px;
			background: #0f0;
		}
		.right{
			margin-right: 200px;
			background: #f00;
		}*/
		
		/*第二种*/
		body{
			display: flex;
		}
		.left{
			background: #0f0;
			flex: 1;
		}
		.right{
			background: #f00;
			width: 200px;
		}
	</style>
</head>

<body>
	<div class="left"></div>
	<div class="right"></div>
</body>