圣杯布局和双飞翼布局

最新推荐文章于 2022-08-16 19:48:13 发布

小小米粒吖

最新推荐文章于 2022-08-16 19:48:13 发布

阅读量108

点赞数

分类专栏： html css 文章标签： css

本文链接：https://blog.csdn.net/weixin_41472431/article/details/104807099

版权

html css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.两边宽度固定，中间宽度自适应

圣杯布局：

具体实现：

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8" />
			<title>圣杯布局</title>
			<style type='text/css'>
			body {
	            min-width: 500px;//设置最小宽度=>>200+100+200=500（position:relative+200）
	            margin: 0;
	         }
			 header{
			 	width: 100%;
			 	background-color: #dd4f43;
			 	text-align: center;
			 }
			 .container{
			 	padding-left: 200px;
			 	padding-right: 100px;
			 	background-color: yellow; 
			 }
			 .container .column{
			 	float: left;/*三列设置浮动 footer需要清除浮动，否则就跑到一行去了*/ 
			 	text-align: center;
			 }
			 #center{
			 	width: 100%;/*center设置100%，那么left和right就会挤到第二行*/
			 	background-color: #4b8bf4;
			 }
			 #left{
			 	width: 200px;
			 	background-color: #ffcd42;
			 	margin-left: -100%;
			 	position: relative;
			 	right: 200px; /*在右边插入200px*/
			 }
			 #right{
			 	width: 100px;
			 	margin-right: -100px;
			 	background-color: #c900c9;
			 }
			  footer{
			  	clear: both;/*清除浮动*/
			 	width: 100%;
			 	text-align: center;
			 	background-color: #17a05d;
			 }
			</style>
		</head>
		<body>
			<header>header</header>
			<div class="container">
			  <div id="center" class="column">center</div>
			  <div id="left" class="column">left</div>
			  <div id="right" class="column">right</div>
			</div>
			<footer>footer</footer>
		</body>
	</html>

双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。

双飞翼布局实现：

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8" />
			<title>圣杯布局</title>
			<style type='text/css'>
				body{
					min-width: 600px;
					/*计算最小页面宽度：由于双飞翼布局没有用到position:relative进行定位，所以最小页面宽度应该为200+150=350px。但是当页面宽度缩小到350px附近时，会挤占中间栏的宽度，因此在设置最小页面宽度时，应该适当增加一些宽度以供中间栏使用,例如300px  100+200+300=600*/
				}
		     #container{
		     	width: 100%
		     }
		     .column{
		     	float: left;
		     }
		     header{
		     	background-color: #f94;
		     }
		     #center{
		     	background-color: red;
		     	margin-left: 200px;
                margin-right: 100px;
		     }
		     #left{
		     	width: 200px;
		     	margin-left: -100%;
		     	background-color: pink;
		     }
		     #right{
		     	width: 100px;
		     	margin-left: -100px;
		     	background-color: gray;
		     }
		     footer{
		     	background-color: #f94;
		     	clear: both;
		     }
			</style>
		</head>
		<body>
			<header>header</header>
			<div id="container" class="column">
			  <div id="center">center</div>
			</div>
			  <div id="left" class="column">left</div>
			  <div id="right" class="column">right</div>
			<footer>footer</footer>
		</body>
	</html>