02.页面布局常用的两种方法

最新推荐文章于 2022-12-22 17:24:25 发布

endingCode

最新推荐文章于 2022-12-22 17:24:25 发布

阅读量606

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_44768421/article/details/109645100

版权

说明：

三列布局的特点是两边固定，中间自适应。圣杯布局和双飞翼布局可以实现这样的需求。区别在于圣杯布局中间列的父元素添加了内边距的同时对左右两列设置偏移量，而双飞翼不需要对左右两列设置偏移量，而是直接给中间列再包一层元素，给该元素直接加内边距实现，稍微方便一点点。

第一种是圣杯布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圣杯布局</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				min-width: 600px;
			}
			#header{
				background-color: grey;
				height: 20px;
			}
			#footer{
				background-color: grey;
				height: 20px;
			}
			#center{
				background-color: orangered;
				width: 100%;
				float: left;
			}
			/*-----------解决高度塌陷问题---------*/
			.clearfix{
				*zoom:1;
			}
			.clearfix:after{
				content: "";
				display: block;
				clear: both;
			}
			/*-----------解决高度塌陷问题---------*/
			#middle{
				padding: 0 200px;
				overflow: hidden;/*伪等高布局*/
			}
			#left{
				background-color: orange;
				width: 200px;
				float: left;
				margin-left: -100%;
				left:-200px;
			}
			#right{
				background-color: orange;
				width: 200px;
				float: right;
				margin-left: -200px;
				right: -200px;
			}
			#left,#right{
				position: relative;
			}
			#left,#center,#right{
				/*伪等高布局*/
				padding-bottom: 10000px;
				margin-bottom: -10000px;
			}
		</style>
	</head>
	<body>
		<div id="header">header</div>
		<div id="middle" class="clearfix">
			<div id="center">center</div>
			<div id="left">
				leftleftleftleftleft<br />
				leftleftleftleftleft<br />
				leftleftleftleftleft<br />
				leftleftleftleftleft<br />
				leftleftleftleftleft<br />
			</div>	
			<div id="right">right</div>
		</div>
		<div id="footer">footer</div>
	</body>
</html>

第二种是双飞翼布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圣杯布局</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				min-width: 600px;
			}
			#header{
				background-color: grey;
				height: 20px;
			}
			#footer{
				background-color: grey;
				height: 20px;
			}
			#center{
				background-color: orangered;
				width: 100%;
				float: left;
			}
			.center_in{
				padding: 0 200px;
			}
			/*-----------解决高度塌陷问题---------*/
			.clearfix{
				*zoom:1;
			}
			.clearfix:after{
				content: "";
				display: block;
				clear: both;
			}
			/*-----------解决高度塌陷问题---------*/
			#middle{
				/* padding: 0 200px; */
				overflow: hidden;/*伪等高布局*/
			}
			#left{
				background-color: orange;
				width: 200px;
				float: left;
				margin-left: -100%;
			}
			#right{
				background-color: orange;
				width: 200px;
				float: right;
				margin-left: -200px;
			}
			#left,#center,#right{
				/*伪等高布局*/
				padding-bottom: 10000px;
				margin-bottom: -10000px;
			}
		</style>
	</head>
	<body>
		<div id="header">header</div>
		<div id="middle" class="clearfix">
			<div id="center">
				<div class="center_in">center</div>
			</div>
			<div id="left">
				leftleftleftleftleft<br />
				leftleftleftleftleft<br />
				leftleftleftleftleft<br />
				leftleftleftleftleft<br />
				leftleftleftleftleft<br />
			</div>	
			<div id="right">right</div>
		</div>
		<div id="footer">footer</div>
	</body>
</html>