圣杯布局三种方式

全栈程序员站长

发布于 2022-09-07 11:06:44

1.6K1

发布于 2022-09-07 11:06:44

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

圣杯布局是经典的css布局，左右两栏的宽度固定不变，中间那一栏是自适应，下面将用felx、float、position三种方法进行圣杯布局

效果图：

body代码：

<body>
	<header></header>
	<div class="box">
		<div class="left"></div>
		<div class="right"></div>
		<div class="middle"></div>
	</div>
	<footer></footer>

</body>

1. 圣杯布局之flex： left和right定宽为200px，middle自适应

给middle设置弹性布局display:flex;
left和right定宽200px，middle设置为flex:1;

css代码：

header{
			height: 80px;
			background-color: #cccccc;
		}
		.box{
			height: 200px;
			background-color: yellow;
			display: flex;
		}
		.box .middle{
			height: 200px;
			background: pink;
			flex: 1;
		}
		.box .left{
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.box .right{
			width: 200px;
			height: 200px;
			background-color: purple;
		}
		footer{
			height: 100px;
			background-color: black;
			color: white;
		}

2. 圣杯布局之float 将left进行浮动靠左，将right进行浮动靠右

css代码：

header{
			height: 80px;
			background-color: #cccccc;
		}
		.box{
			height: 200px;
			background-color: yellow;
		}
		.box .left{
			width: 200px;
			height: 200px;
			background-color: red;
			float: left;
		}
		.box .right{
			width: 200px;
			height: 200px;
			background-color: purple;
			float: right;
		}
		.box .middle{
			height: 200px;
			background-color: pink;
		}
		footer{
			height: 100px;
			background-color: black;
			color: white;
		}

3. 圣杯布局之position：left和right宽度设为20%，中间60%自适应

将父元素box设为相对定位，再将left、right、middle设置为绝对定位

header{
			height: 80px;
			background-color: #cccccc;
		}
		.box{
			height: 200px;
			background-color: yellow;
			position: relative;
		}
		.box .left{
			width: 20%;
			height: 100%;
			background-color: red;
			position: absolute;
			top: 0;
			left: 0;
		}
		.box .middle{
			height: 100%;
			background-color: pink;
			position: absolute;
			top: 0;
			left: 20%;
		}
		.box .right{
			width: 20%;
			height: 100%;
			background-color: purple;
			position: absolute;
			top: 0;
			right: 0;
		}
		footer{
			height: 100px;
			background-color: black;
			color: white;
		}

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/148044.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css