圣杯布局

最新推荐文章于 2024-07-17 16:42:38 发布

小森呀

最新推荐文章于 2024-07-17 16:42:38 发布

阅读量308

点赞数

分类专栏：小案例文章标签：圣杯布局

本文链接：https://blog.csdn.net/KEY2018/article/details/94835955

版权

小案例专栏收录该内容

13 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圣杯布局</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				position: absolute;/*大背景铺满全屏*/
				top: 0px;
				bottom: 0px;
				left: 0px;
				right: 0px;
				background-color: lightblue;
				padding: 0px 200px 0px 300px;/*给左右侧边栏预留合适位置*/
				min-width: 500px;/*设置最小宽度*/
			}
			.bg{
				width: 100%;
				height: 100%;
				background-color: lightcoral;
				float: left;/*中间盒子，需要左浮动*/
			}
			.left{
				width: 300px;
				height: 100%;
				float: left;
				background-color: lightgreen;
				margin-left: -100%;
				position: relative;
				left: -300px;
			}
			.right{
				width: 200px;
				height: 100%;
				float: left;
				background-color: lightskyblue;
				margin-left: -200px;
				position: relative;
				right: -200px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="bg"></div>
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>