左侧固定宽度，右侧自适应宽度铺满剩余屏幕

最新推荐文章于 2024-06-25 22:50:37 发布

机器猫zhao

最新推荐文章于 2024-06-25 22:50:37 发布

阅读量3.8k

点赞数

分类专栏： html 文章标签： css自适应布局

本文链接：https://blog.csdn.net/zx_p24/article/details/53304294

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、左边左浮动，右边加overflow:hidden;

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

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

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

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

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