双飞翼布局和圣杯布局

最新推荐文章于 2022-03-21 22:52:55 发布

Hong Jet

最新推荐文章于 2022-03-21 22:52:55 发布

阅读量3.5w

点赞数 17

分类专栏： css

本文链接：https://blog.csdn.net/smlljet/article/details/93379411

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）
双飞翼布局
代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css</title>
	</head>
	 <style type="text/css">
	 	*{
	 		margin:0;
	 		padding: 0;
	 	}
	 	.main>div{
	 	 float: left;
	 	}
	 	.left {
	 		width: 200px;
	 		background: red;
	 		margin-left: -100%;
	 	}
	 	.right{
	 		width: 200px;
	 		background: blue;
	 		margin-left: -200px;
	 	}
	 	.middle{
	 		width: 100%;
	 		background: yellow;
	 	
	 	}
	 	.content{
	 		margin-left: 200px;
	 		margin-right: 200px;
	 	}
	 </style>
	<body>
	<div class="main">
		<div class="middle">
	 		<div class="content">
	 		中间
		 	</div>
		 </div>
		<div class="left">
			左边
		</div>
		<div class="right">
			右边
		</div>
	</div>
	</body>
</html>

效果
在这里插入图片描述

圣杯布局
（使用float布局框架，用margin为负值， position: relative定位）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css</title>
	</head>
	 <style type="text/css">
	 	body{
	 		min-width: 550px;
	 	}
	 	*{
	 		margin:0;
	 		padding: 0;
	 	}
	 	.header , .footer{
	 		background: gray;
	 		width: 100%;
	 	}
	 	.footer{
	 		clear: both;
	 	}
         .main{
         	height: 200px;
         	padding: 0 150px 0 200px;
         	background: greenyellow;
         	*zoom: 1;
         }
         .left , .center , .right{
         	float: left; 
         }
         .center{
         	width: 100%;
         	height: 200px;
         	background: red;
         }
         .left {
         	width: 200px;
         	height: 200px;
         	background: yellow;
         	margin-left: -100%;
         	position: relative;
         	left: -200px;
         }
         .right{
         	width: 150px;
         	height: 200px;
         	background: gainsboro;
         	margin-left: -150px;
         	position: relative;
         	left: 150px;![在这里插入图片描述](https://img-blog.csdnimg.cn/20190623214733790.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtbGxqZXQ=,size_16,color_FFFFFF,t_70)
         }
	 </style>
	<body>
		
	<div class="header">
             头部
	</div>
	<div class="main">
		<div class="center">中间中间中间中间中间中间中间后</div>
		<div class="left">左边</div>
		<div class="right">右边</div>
	</div>
	<div class="footer">
		底部
	</div>
	</body>
</html>

效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190623163922505.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtbGxqZXQ=,size_16,color_FFFFFF,t_70**
优点**
（1）兼容性好，兼容若有主流浏览器，包括万恶的IE6
（2）可以实现主要内容的优先加载
在这里插入图片描述
个人还是推荐使用双飞翼布局