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

最新推荐文章于 2021-08-19 15:23:28 发布

机器猫zhao

最新推荐文章于 2021-08-19 15:23:28 发布

阅读量587

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： css

本文链接：https://blog.youkuaiyun.com/zx_p24/article/details/53304674

html 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了三种网页布局方法：使用浮动实现左右布局、通过绝对定位实现右侧固定宽度布局及利用绝对定位完成左右两侧不同宽度的布局。这些技巧对于前端开发者来说非常实用。

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

1、左边左浮动，margin-left负值，右边右浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	.left{
		float: left;
		width: 100%;
		height: 300px;
		background: #000;
		margin-right: -200px;
		font-size: 40px;
		color: #fff;
	}
	.right{
		float: right;
		width: 200px;
		background: red;
		height: 300px;
		font-size: 40px;
		color: #fff;
	}
	</style>
</head>
<body>
	<div class="box">
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
</body>
</html>

2、右边绝对定位，左边margin-left

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	.left{
		
		height: 300px;
		background: #000;
		margin-right: 200px;
		font-size: 40px;
		color: #fff;
	}
	.right{
		position: absolute;
		top: 0;
		right: 0;
		width: 200px;
		background: red;
		height: 300px;
		font-size: 40px;
		color: #fff;
	}
	</style>
</head>
<body>
	<div class="box">
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
</body>
</html>

3、左右绝对定位，左边加width，top，right，left

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	.left{
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		width: 100%;
		background: #000;
		height: 300px;
		font-size: 40px;
		color: #fff;
	}
	.right{
		position: absolute;
		top: 0;
		right: 0;
		width: 200px;
		background: red;
		height: 300px;
		font-size: 40px;
		color: #fff;
	}
	</style>
</head>
<body>
	<div class="box">
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
</body>
</html>