简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS双飞翼和圣杯布局 2018-3-27
Blogger Information
Blog 27
fans 2
comment 1
visits 13397
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
CSS双飞翼和圣杯布局 2018-3-27
kaclod的博客
Original
645 people have browsed it

双飞翼布局和圣杯布局实现的效果一样，都是实现3栏布局，中间盒子自适应，左右盒子固定的布局。


双飞翼布局

1 是先建一个dom树结构，得到外层为container的大的的div块包裹，内层得到三列，分别为main,left,right.

需要注意dom结构中，main的主列在最前面。

2 让3列浮动起来，浮动后因为main外包的wrap壳是100%

3 左列需要设置负的margin值-100%，右列需要设置margin-left:-200px(移动一个绝对值，能够把自己移上去到最后就可以。)

4： main内容区主列需要添加左右的外边距，将内容区挤出


圣杯布局

dom树和双飞翼布局一样，3列浮动也是一样的，但是main主体没有外包的.wrap的div由于浮动后左右两侧的浮动快被挤到下面

所以将浮动后的left和right上移到main区块的指定位置，最后通过相对定位（relative）left:-200,right：-200把他们占

据的main空间腾出来。

区别：圣杯布局用到相对定位，双飞翼不需要；双飞翼多了一个包裹中间区域的div，圣杯布局则不用。 

双飞翼代码如下：

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>双飞翼布局</title>
	<style type="text/css">
		.header,.footer {
			width:100%;
			height:60px;
			background-color:lightgray;

		}

		.content {
			width:1000px;
			height:100%;
			background-color: gray;
			margin:auto;
			text-align:center;/*内联文本居中*/
			line-height:60px;
		}

		.container {
			width:1000px;
			margin:auto;
			overflow:hidden;/*当前区块能够包住内部的浮动区块*/
			background-color:yellow;
		}

		.wrap {
			width:100%;
			background-color: cyan;
			float:left;/*左浮动*/
		}

		.main {
			min-height:600px;
			background-color:wheat;
			margin:0 200px;
		}
		.left {
			min-height:600px;
			width:200px;
			float:left;
			background-color: blue;
			margin-left:-100%;/*将左侧区块拉回主区块的中间位置*/
		}

		.right {
			min-height:600px;
			width:200px;
			float:left;
			background-color: green;
			margin-left:-200px;/*将区块拉回主区块的右侧*/
		}
	</style>
</head>
<body>
	<div class="header">
		<div class="content">头部内容</div>
	</div>
	<div class="container">
		<div class="wrap">
			<div class="main">主体内容</div>
		</div>

		<div class="left">左侧内容</div>

		<div class="right">右侧内容</div>
	</div>


	<div class="footer">
		<div class="content">尾部内容</div>
	</div>
	
</body>
</html>

运行实例 »

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

圣杯布局如下：

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圣杯布局</title>
	<style type="text/css">
	.header, .footer {
		width:100%;
		height:60px;
		background-color:lightgray;

	}

	.footer {
		clear:both;/*清除底部左右两边的浮动元素*/
	}

	.content {
		width:1000px;
		height:100%;
		background-color:gray;
		margin:auto;
		text-align:center;
		line-height:60px;
	}

	.container {
		width:600px;
		background-color:yellow;
		margin:auto;
		overflow:hidden;/*使它能包住浮动区块*/
		/*因为左右区块现在覆盖在main之上,挡住了main的内容,现在添加padding来实现自身内容显示*/
		padding:0 200px;
	}

	.main {
		height:650px;
		width:100%;
		float:left;
		background:wheat;
	}

	.left {
		width:200px;
		min-height:650px;
		float:left;
		background-color:green;
		margin-left:-100%;
		position: relative;/*相对定位*/
		left:-200px;

	}

	.right {
		width:200px;
		min-height:650px;
		float:left;
		margin-left:-200px;
		background-color:lightgreen;
		position:relative;
		right:-200px;
	}
		
	</style>
	
</head>
<body>
	<div class="header">
		<div class="content">网站头部内容</div>
	</div>

	<div class="container">
		<div class="main">主 体</div>
		<div class="left">左侧</div>
		<div class="right">右侧</div>
	</div>


	<div class="footer">
		<div class="content">网站尾部内容</div>
	</div>

	
</body>
</html>

运行实例 »

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

手抄作业：

1.png

2.png

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！