三列布局和圣杯布局

最新推荐文章于 2021-10-05 19:38:56 发布

无悟饭空

最新推荐文章于 2021-10-05 19:38:56 发布

阅读量110

点赞数

分类专栏： html和css # 布局

本文链接：https://blog.csdn.net/weixin_43269800/article/details/103867811

版权

html和css 同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

布局

9 篇文章 0 订阅

订阅专栏

——1、两边固定，当中自适应
——2、当中列要完整显示
——3、当中列要优先加载

用定位来做（推荐）

html代码：

<body >
	<div id="left">left</div>
	<div id="middle">middle</div>
	<div id="right">right</div>
</body>

css代码：

*{
	margin: 0;
	padding: 0;
}
body{
position:relative;
min-width:600px; /*2left+right=600px*/
}
div{
	height: 100px;
}
#left,#right{
	width: 200px;
	background: pink;
}
#middle{
	background: deeppink;
	padding: 0 200px;/*这是容易忽略的点*/
}
#left{
	position: absolute;
	left: 0;
	top: 0;				
}
#right{
	position: absolute;
	right: 0;
	top: 0;
}

注意点：
1、给middle加左右的padding，把左右的宽度预留出来。
2、为了要让中间列内容完整呈现，给body加min-width；
min-width参考大小的公式：2*left的width+right的width。
3、要给body加相对定位，不然最终left和right的参考是初始化包含块，他是一个视窗大小的矩形，并不等于视窗。

用浮动来做（最先想到）

html代码：

	<body>
		<div id="left">left</div>
    	<div id="right">right</div>
    	<div id="middle">middle</div>
	</body>

css代码：

*{
	margin: 0;
	padding: 0;
}
body{
	/*2*left+right*/
	min-width: 600px;
}
div{
	height: 100px;
}
#left,#right{
	width: 200px;
	background: pink;
}
#left{
	float: left;
}
#right{
	float: right;
}
#middle{
	background: deeppink;
	padding: 0 200px;/*这是容易忽略的点*/
}

缺点：用浮动做三列布局，当中列必须放到左右两列的下面，这样的话，当中列不能第一时间加载。

圣杯布局（最佳方案）

在这之前，我们先搞透几种情况。

margin为负值

margin的本质是改变的是元素边界的位置，而没有改变元素本身盒模型的位置，而元素内容区在当前元素盒模型中是有改变的。（深入理解）
当margin为正值时：
在这里插入图片描述
如图所示margin-left：100px；我们改变了元素左边界的位置，让边界向右移动了100px，从而元素也向右移动了100px；

当margin为负值时：

在这里插入图片描述
如图所示，margin-left：-100px；我们改变了元素左边界向左移动了100px；

当前红色区域的元素为div的块级元素，独占一行。如果把红色div改为浮动元素，让其脱离文档流会是什么情况呢？

在这里插入图片描述
而此时红色div和粉色div是在同一行的不同层级。给粉色div设置margin：-100px；
我们改变了元素左边界向左移动了100px；

如果我们把粉色div也设置float。那么这两个div会在同一层级。会出现什么情况呢？

在这里插入图片描述
如果我们设置粉色div的margin-left:-100%;

此时我们看到，粉色div来到了第一行的最左边。

<body>
  <div class="red"></div>
  <div class="pink"></div>
</body>

* {
  margin: 0;
  padding: 0;
}
.red {
  float: left;
  width: 100%;
  height: 50px;
  background-color: red;
  
}
.pink {
  float: left;
  width: 200px;
  height: 100px;
  background-color: pink;
  border-left: 1px solid blue;
  border-right: 1px solid black;
  margin-left:-100%; 
  
}

原因如下：
1、红色div和粉色div是同一个父级；
2、红色div的width的100%是相对于父级的width；
3、粉色div的margin的100%是向相对父级的width；
所以当粉色div设置margin-left：-100%时，
就相当于，在第一行末尾，把粉色div左边界向左移动红色div的width的值。

圣杯布局代码实例

	<body>
		<div id="header">header</div>
		<div id="content" class="clearfix">
			<div class="middle">
				middle
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div id="footer">footer</div>
	</body>

*{
	margin: 0;
	padding: 0;
}
body{
	min-width: 600px;
}
#content{
	/*保留左右两栏的位置*/
	padding: 0 200px;
}
#header,#footer{
	height: 20px;
	text-align: center;
	border: 1px solid  deeppink;
	background: gray;
}
#content .middle{
	float: left;
	width: 100%;
	background: pink;
}
#content .left{
	/*结合相对定位，让左栏移到#content预留的左边区域*/
	position: relative;
	left: -200px; 
	margin-left: -100%;
	float: left;
	width: 200px;
	background: yellow;
}
#content .right{
    /*结合相对定位，让右栏移到#content预留的右边区域*/
	position: relative;
	right: -200px;
	margin-left: -200px;
	float: left;
	width: 200px;
	background: yellow;
}
.clearfix{
	*zoom: 1;
}
.clearfix:after{
	content: "";
	display: block;
	clear: both;
}

在这里插入图片描述
圣杯布局优点：
1、保证中间栏优先渲染。

无悟饭空

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
三列布局和圣杯布局

——1、两边固定，当中自适应——2、当中列要完整显示——3、当中列要优先加载用定位来做（推荐）html代码：<body > <div id="left">left</div> <div id="middle">middle</div> <div id="right">right</div><...
复制链接

扫一扫