左边div固定宽度，右侧div固定的方式

最新推荐文章于 2024-08-13 22:20:49 发布

lucky_girl_girl

最新推荐文章于 2024-08-13 22:20:49 发布

阅读量244

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/lucky_girl_girl/article/details/115008818

版权

笔记专栏收录该内容

87 篇文章 0 订阅

订阅专栏

1.父级div定位relative，子级右侧div position left：左边宽度，right：0

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.container{
			position:relative;
			width:500px;
			height:500px;
			border:1px solid black;
		}
		.left{
			width:100px;
			height:100%;
			background-color: aqua;
		}
		.right{
			position:absolute;
			left:100px;
			top:0;
			right:0;
			height:100%;
			background-color: bisque;
		}
	</style>
	<body>
		<div class="container">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

2.父级：display：flex；子级：flex：1；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.container{
			display:flex;
			width:500px;
			height:500px;
			border:1px solid black;
		}
		.left{
			width:100px;
			height:100%;
			background-color: aqua;
		}
		.right{
			flex:1;
			height:100%;
			background-color: bisque;
		}
	</style>
	<body>
		<div class="container">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

3.calc（100%-左边宽度）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.container{
			width:500px;
			height:500px;
			border:1px solid black;
		}
		.left{
			float:left;
			width:100px;
			height:100%;
			background-color: aqua;
		}
		.right{
			width:calc(100% - 100px);
			height:100%;
			margin-left:100px;
			background-color: bisque;
		}
	</style>
	<body>
		<div class="container">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>