圣杯布局的两种实现

最新推荐文章于 2023-04-10 23:16:51 发布

hcoke

最新推荐文章于 2023-04-10 23:16:51 发布

阅读量253

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_62962469/article/details/126923980

版权

JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

实现效果：网页窗口在缩放过程中，三栏布局两边的盒子宽度是固定的，中间的盒子的宽度是自适应的。

1.margin负值+float

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.container {
				padding-left: 100px;
				padding-right: 100px;
			}
			
			.container div {
				float: left;
			}
			
			.main {
				width: 100%;
				height: 200px;
				background-color: pink;
			}
			
			.left {
				position: relative;
				left: -100px;
				width: 100px;
				height: 200px;
				margin-left: -100%;
				background-color: skyblue;
			}
			
			.right {
				width: 100px;
				height: 200px;
				margin-right: -100px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="main"></div>
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

2.flex布局实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.container {
				display: flex;
			}
			
			.left {
				width: 200px;
				height: 200px;
				background-color: pink;
			}
			
			.right {
				width: 200px;
				height: 200px;
				background-color: skyblue;
			}
			
			.center {
				flex: 1;
				height: 200px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left"></div>
			<div class="center"></div>
			<div class="right"></div>
		</div>
	</body>
</html>