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

最新推荐文章于 2025-03-02 09:05:31 发布

原创最新推荐文章于 2025-03-02 09:05:31 发布 · 640 阅读

1 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了三种实现左侧宽度固定、右侧宽度自适应布局的方法：通过浮动和外边距调整、使用CSS3的calc()函数以及利用弹性盒子（Flexbox）。每种方法都提供了具体的HTML和CSS代码示例。

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

实现左侧宽度固定，右侧宽度自适应的布局有很多，这里介绍几种方式：

方式一：左侧盒子宽度设置为100像素，并且设置为左浮动，右侧的盒子不设置宽度，只是设置个margin-left值就可以了，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.left {
			width: 100px;
			height: 20px;
			background-color: red;
			float: left;
		}
		.right {
			margin-left: 100px;
			height: 20px;
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="left">左侧</div>
	<div class="right">右侧</div>
</body>
</html>

但是以上办法，如果设置为右侧，固定左侧自适应的布局是不可以的，如果想实现这样的布局可以设置把两个盒子位置颠倒一下，然后设置右边的盒子往右浮动，左边的盒子设置margin-right即可。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.right {
			width: 100px;
			height: 20px;
			background-color: red;
			float: right;
		}
		.left {
			margin-right: 100px;
			height: 20px;
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="right">右侧</div>
	<div class="left">左侧</div>
</body>
</html>

方式二：使用css3的calc()，但是浏览器的兼容性不好，不推荐使用。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.left {
			width: 100px;
			height: 20px;
			background-color: red;
		}
		.right {
			width: calc(100%-100px);
			height: 20px;
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="left">左侧</div>
	<div class="right">右侧</div>
</body>
</html>

方式三：使用弹性盒子进行布局。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body {
			display: flex;
		}
		.left {
			width: 100px;
			height: 20px;
			background-color: red;
		}
		.right {
			flex: 1;
			height: 20px;
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="left">左侧</div>
	<div class="right">右侧</div>
</body>
</html>