圣杯布局+弹性布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		*{
			margin: 0;
			padding:0;
			list-style-type: none;
			border:none;
			line-height: 1.5em;
		}
		.body{
			width: 90%;
			margin: 0 auto;
			min-width: 600px;
		}
		.body>.top,.body>.foot{
			font-size: 20px;
			font-weight: bold;
		}
		div{
			border:solid 1px red;
				}
		.main::after{
			content: '';
			display: block;
			clear: both;
		}
		.main{
			margin: 1px 0 ;
			padding:2px;
		}
		.main>.left{
			float: left;
			width: 200px;
		}
		.main>.center{
			/*原理 就是把左右 两边写在前面，让他们两浮动，然后中间删除浮动 他就会站着一排顶上去，然后使用margin控制左右外边距*/
			/*float: left;*/
			margin-left: 210px;
			/*width: 530px;*/
			margin-right: 210px;
		}
		.main>.right{
			float: right;
			width: 200px;
		}
	</style>	
</head>
<body>
	<div class="body">
		<div class="top">这石头布</div>
		<div class="main">
			<div class="left">这是中左</div><div class="right">这是种右</div>
			<div class="center">中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话中华人话</div>
			
		</div>
		<div class="foot">这是下</div>
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*实现固定宽度圣杯布局：总款：960px，左右各200px*/
		*{
			margin:0;
			padding: 0;
			border:none;
			font-size: 13px;
			line-height: 1.5em;
		}
		.clear::after{
			content: "";
			display: block;
			clear:both;
		}
		div{
			border:solid 1px red;
		}
		.body{
			width: 960px;
			margin: 0 auto;
			padding:1px;
		}
		.top,.foot{
			font-size:20px;
			text-align: center;
			font-weight: bold;
			border:solid 1px red;

		}
		.main{
			margin:8px 0px;
			padding:2px;
		}
		.main>.left{
			float:left;
			width: 200px;
		}
		.main>.center{
			float:left;
			margin-left:10px;
			width: 530px;
		}
		.main>.right{
			float: right;
			width: 200px;
		}
	</style>
</head>
<body>
	<div class="body">
		<div class="top">头部区域</div>
		<div class="main clear">
			<div class="left">左</div>
			<div class="center">中<br>中<br>中<br>
			</div>
			<div class="right">右</div>
		</div>
		<div class="foot">底部区间</div>
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*实现可变宽度圣杯布局：总宽：窗口的90%，最小800px；
		并且：左右各200px*/

		/*关键核心：
			1，中间盒子不要浮动
			2，左右盒子各自左右浮动，并先于中间盒子出现
			3，中间盒子左右的margin跟左右盒子宽度匹配（略多一点间隙)
			4, 通常也需要设置总宽度的最小宽度。
		*/
		*{
			margin:0;
			padding: 0;
			border:none;
			font-size: 13px;
			line-height: 1.5em;
		}
		.clear::after{
			content: "";
			display: block;
			clear:both;
		}
		div{
			border:solid 1px red;
		}
		.body{
			width: 90%;
			min-width:800px;
			margin: 0 auto;
			padding:1px;
		}
		.top,.foot{
			font-size:20px;
			text-align: center;
			font-weight: bold;
			border:solid 1px red;

		}
		.main{
			margin:8px 0px;
			padding:2px;
		}
		.main>.left{
			float:left;
			width: 200px;
		}
		.main>.center{
			/*float:left;*/
			margin-left:10px;
			/*width: 530px;*/
			margin-left:210px;
			margin-right:210px;
			background: gray;
		}
		.main>.right{
			float: right;
			width: 200px;
		}
	</style>
</head>
<body>
	<div class="body">
		<div class="top">头部区域</div>
		<div class="main clear">
			<div class="left">左</div>
			<div class="right">右</div>
			<div class="center">中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国人民共和国中华人民共和国人民共和国中华人民共和国人民共和国中华人民共和国
			</div>
		</div>
		<div class="foot">底部区间</div>
	</div>
</body>
</html>

圣杯布局+弹性布局

猜你喜欢