html圣杯布局实现思路-三栏布局 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圣杯布局实现思路</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.clearfix::after{
				content: "";
				display: block;
				clear: both;
			}
			.clearfix{
				*zoom: 1;
			}
			.container{
				border: 1px solid #0000FF;
				padding-left: 200px;
				padding-right: 300px;
			}
			.left{
				float: left;
				width: 200px;
				height: 400px;
				background-color: red;
				
				margin-left: -100%;
				position: relative;
				left: -200px;
			}
			
			.right{
				float: left;
				width: 300px;
				height: 400px;
				background-color: blue;
				
				margin-left: -300px;
				position: relative;
				right: -300px;
			}
			.middle{
				float: left;
				width: 100%;
				height: 400px;
				background-color: #00BCC2;
			}
		</style>
	</head>
	<!-- 
		圣杯布局和双飞翼布局都是为了实现左右两栏固定宽度,
		中间部分自适应的三栏布局，不过两者实现的原理有所
		不同。
		
		圣杯布局实现思路

		1 )将三者都float:left
		2 ) middle部分width:100%占满
		3 )此时middle占满了，所以要把left拉到最左边，使用
		margin-left:- 100%
		4 )这时left拉回来了，但会覆盖middle内容的左端，要
		把middle内容拉出来，所以在外围container加 上左右
		padding留出左右两栏宽度
		5 ) middle内容拉回来了，但left山跟着过来了，所以要
		还原，就对left使用相对定位left:负值;拉回左边，同
		理，right也要相对定位还原right:负值;拉回右边。

	 -->
	<body>
		<div class="container clearfix">
			<!-- middle 是主要内容，想让他先加载，放到前面 -->
			<div class="middle"></div>
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

 

posted @ 2023-05-17 16:57  JackieDYH  阅读(10)  评论(0)  编辑  收藏  举报  来源