圣杯布局三种方式

圣杯布局三种方式圣杯布局是经典的css布局,左右两栏是定宽,中间那一栏是自适应,下面将用felx、float、position三种方法进行圣杯布局,实现效果如下:圣杯布局之flexcss代码:header{ height:80px; background-color:#cccccc; } .box{ height:200px; background-color:…

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

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

效果图:
left和right是定宽,middle是自适应的

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;
		}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/148044.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号