圣杯三栏布局思路--小技巧 

圣杯布局——三列布局
 
 1、html结构中——先主体内容后侧边栏；
 2、两侧固定宽度，中间内容宽度设置width: 100%;
 3、主体内容和左右侧边栏分别加浮动float: left;
 4、左侧设置margin-left: -100%;将左侧拉到最左边；右侧设置margin-left: -右侧边宽度；
 5、将中间露出来：在外面的大盒子上设置padding: 0 右侧边的宽度 0 左侧边宽度；
 6、分别为左侧边和右侧边设置position:relative; 左侧设置left:-左侧边的宽度;还原左侧边。
 7、右侧边设置right:-右侧边宽度;还原右侧边

示例1

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

示例2

<!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>div{
				min-height: 300px;
			}
			.container{
				padding: 0 300px 0 200px;
			}
			.middle{
				float: left;
				width: 100%;
				background-color: #056EC8;
				
			}
			.left{
				float: left;
				width: 200px;
				background-color: #0084BB;
				
				margin-left: -100%;
				position: relative;
				left: -200px;
			}
			.right{
				float: left;
				width: 300px;
				background-color: #00AFC7;
				
				margin-left: -300px;
				position: relative;
				right: -300px;
			}
		</style>
	</head>
	<body>
		<div class="container clearfix">
			<div class="middle">中间内容</div>
			<div class="left">左边内容</div>
			<div class="right">右边内容</div>
		</div>
	</body>
</html>

 

 

 

 

posted @ 2020-02-19 20:34  JackieDYH  阅读(5)  评论(0)  编辑  收藏  举报  来源