简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 圣杯布局和双飞翼布局
Blogger Information
Blog 38
fans 0
comment 1
visits 30421
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
圣杯布局和双飞翼布局
1
Original
592 people have browsed it

        圣杯布局和双飞是前端布局中绕不开的两座的大山，二者解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染，但二者在实现的时候却有这微小的差异。

圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding，将左右两个div用相对布局移动到两侧。

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.header,.footer{
			width: 100%;
			height: 60px;
			background-color: #CC6666;
		}
		.footer{
			/*清除浮动*/
			clear: both;
		}
		.content{
			width: 1000px;
			height: 100%;
			background-color: #CC9966;
			margin: auto;
		}
		.container{
			width: 600px;
			/*使父容器里的所有区块居中*/
			margin: auto;
			background-color: red;
			/*包住浮动的区块*/
			overflow: hidden;
			/*将left和right弹出去*/
			padding:0 200px;
		}
		.mian{
			/*宽度和父元素一致才能将left和right挤下来*/
			width: 100%;
			background-color: #CCCC99;
			min-height: 600px;
			float: left;
		}
		.left{
			width: 200px;
			background-color: #999999;
			min-height: 600px;
			/*当进行左浮动的时候，由于mian的宽度和父容器一致所有被挤了下来*/
			float: left;
			/*外边距为-100%是为了让它回到初始位置*/
			margin-left: -100%;
			/*设置相对定位，相对于父元素向左移动-200px*/
			position: relative;
			left: -200px;
			
		}
		.right{
			width: 200px;
			background-color: #9999CC;
			min-height: 600px;
			float: left;
			/*设置左外边距为当前宽度的负值,使之定位到main区块的右边*/
			margin-left: -200px;
			/*设置相对定位，相对于父元素向右移动-200px*/
			position: relative;
			right: -200px;
			
		}

	</style>
</head>
<body>
	<div class="header">
		<div class="content">头</div>
	</div>
	<div class="container">
		<div class="mian">主题</div>
		<div class="left">左</div>
		<div class="right">右fdsfsfdsfsfdfsd</div>
	</div>
	<div class="footer">
		<div class="content">尾部</div>
	</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

解法：

  1. 圣杯布局必须有一个父容器，父容器内的三个div，必须保证主体在前，以保证优先渲染。

  2. 主体宽度一定要跟父容器一致

  3. 父元素内的div要全部左浮动并设置左右divmargin-left使他们回到原来的位置

  4. 父元素要设置padding撑开左右div 的位置

  5. 父元素内的左右div进行相对定位，移动到撑开的两边


        双飞翼布局直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.header,.footer{
			width: 100%;
			height: 60px;
			background-color: #333399;
		}
		.centent{
			width: 1000px;
			height: 100%;
			background-color: #336699;
			margin: auto;
		}
		.container{
			width:1000px;
			margin: auto;
			overflow: hidden;
			background-color: #339999;
		}
		.warp{
			width: 100%;
			float: left;
			background-color: #33CC99;

		}
		.main{
			min-height: 600px;
			background-color: #33FF99;
			margin: 0 200px;
		}
		.left{
			width: 200px;
			min-height: 600px;
			float: left;
			background-color: #660099;
			margin-left: -100%;
		}
		.right{
			width: 200px;
			min-height: 600px;
			float: left;
			background-color: #663399;
			margin-left: -200px;
		}
	</style>
</head>
<body>
	<div class="header">
		<div class="centent">头部</div>
	</div>
	<div class="container">
		<div class="warp">
			<div class="main">主体</div>
		</div>
		<div class="left">左边</div>
		<div class="right">右边</div>
	</div>
	<div class="footer">
		<div class="content">尾部</div>
	</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

双飞翼布局基本上跟圣杯布局一样，重点在于，

  1. 双飞翼布局主体content套了一个父级块warp，warp设置宽度，主体沿用父元素的宽度就行了。

  2. 左右div使用margin-left回到起始位。

  3. 主体div使用magin将两侧div挤开。

一下是手写内容

微信图片_20180328181459.jpg

微信图片_20180328181504.jpg

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
  • 1
    2018-03-16 00:39:40
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！