圣杯布局详细教程

一名不知名程序员

已于 2022-07-11 21:41:14 修改

阅读量743

点赞数

分类专栏：大前端 html css 文章标签：大数据

于 2022-07-11 21:40:17 首次发布

本文链接：https://blog.csdn.net/why0925123/article/details/125731324

版权

大前端同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

<style>
		    /* 圣杯布局和双飞翼的特点:
			  1、两边定宽，中间100%
			  2、中间部分优先渲染，提升用户体验 
			  圣杯布局缺点:当中间区域宽度小于两边时，布局会破碎
			  双飞翼布局不会破碎
			  
			  圣杯布局:
			      wrapper（div中  div左  div右）
				   1、wrapper >div,float:left
				   2、wrapper设置左右padding
				   3、div左,  margin-left:-100%;relative
				   4、div右，  margin-left:-200px;relative
			  双飞翼:
			     wrapper(div中(div.contain)  div左   div右)
				  1、wrapper >div,float:left
				  2、div.contain设置左右margin
				  3、div左,  margin-left:-100%
				  4、div右,  margin-left:-200px
			*/
			  .fl,.fr{
				  width: 200px;
				  height: 200px;
			  }
			  /* 2、负外边距+相对定位 移动到空白区域 */
			  .fl{
				  background-color: red;
				  /* 负外边距 */
				  margin-left: -100%;
				  /* 相对定位 */
				  position: relative;
				  left: -200px;
			  }
			  .fr{
				  background-color: blue;
				  margin-left: -200px;
				  position: relative;
				  left: 200px;
			  }
			  .center{
				  width: 100%;
				  height: 200px;
				  background-color: green;
			  }
			  .wrapper div{
				  float: left;
			  }
			  /* 1、设置padding给左右两边预留空间 */
			  .wrapper{
				  padding-left: 200px;
				  padding-right: 200px;
			  }
			  body{
				  /* 防止布局破碎 */
				  min-width:600px;
			  }
		</style>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="wrapper">
			<div class="center">中间</div>
			<div class="fl">左边</div>
			<div class="fr">右边</div>
		</div>
	</body>
</html>

一名不知名程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圣杯布局详细教程

圣杯布局和双飞翼的特点: 1、两边定宽，中间100% 2、中间部分优先渲染，提升用户体验圣杯布局缺点:当中间区域宽度小于两边时，布局会破碎双飞翼布局不会破碎圣杯布局: wrapper（div中 div左 div右） 1、wrapper >div,float:left 2、wrapper设置左右padding ......
复制链接

扫一扫