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

最新推荐文章于 2024-02-08 10:14:31 发布

persist_xyz

最新推荐文章于 2024-02-08 10:14:31 发布

阅读量545

点赞数

CC 4.0 BY-SA版权

文章标签： css flex

本文链接：https://blog.youkuaiyun.com/persist_xyz/article/details/87895064

本文介绍了一种使用CSS实现左边区域自适应，右边区域固定宽度的布局方法。通过flex布局，使页面在不同屏幕尺寸下都能保持良好的视觉效果。此方法适用于现代浏览器，提供了一个简洁高效的响应式设计解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>