实现圣杯布局的5种方法

实现圣杯布局

1、浮动 float

.content>.left+.center+.right

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			min-height: 40px;
		}
		.header{
			width: 100%;
			background-color: skyblue;
			text-align: center;
		}
		.footer{
			width: 100%;
			background-color: #f2f2f2;
			text-align: center;
		}
		.left{
			float: left;
			width: 200px;
			background-color: pink;
		}
		.right{
			float: right;
			width: 200px;
			background-color: orange;
		}
		.center{
			background-color: forestgreen;
		}
	</style>
	<body>
		<div class="header">头部</div>
		<div class="content">
			<div class="left"></div>			
			<div class="right"></div>
			<div class="center">
				<h2>float 布局</h2>
			</div>
		</div>
		<div class="footer">页尾</div>
	</body>
</html>

.content>.left+.conter+.right 方式的话需要修改一点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			min-height: 40px;
		}
		.header{
			width: 100%;
			background-color: skyblue;
			text-align: center;
		}
		.footer{
			width: 100%;
			background-color: #f2f2f2;
			text-align: center;
		}
		.left{
			float: left;
			width: 200px;
			background-color: pink;
		}
		.right{
			float: right;
			width: 200px;
			background-color: orange;
		}
		.center{
			background-color: forestgreen;
			/* 跟我下面理解的绝对定位原理一样 */
			position: absolute;
			left: 200px;
			right: 200px;
		}
	</style>
	<body>
		<div class="header">头部</div>
		<div class="content">
			<div class="left"></div>	
			<div class="center">
				<h2>float 布局</h2>
			</div>
			<div class="right"></div>
		</div>
		<div class="footer">页尾</div>
	</body>
</html>

2、绝对定位 position
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			min-height: 40px;
		}
		.content>div{
			position: absolute;
		}
		.header{
			width: 100%;
			background-color: skyblue;
			text-align: center;
		}
		.footer{
			width: 100%;
			background-color: #f2f2f2;
			text-align: center;
		}
		.left{
			width: 200px;
			background-color: pink;
			left: 0;
		}
		.right{
			width: 200px;
			background-color: orange;
			right: 0;
		}
		.center{
			background-color: forestgreen;
			left: 200px;
			right: 200px;
			
		}
	</style>
	<body>
		<div class="header">头部</div>
		<div class="content">
			<div class="left"></div>
			<div class="center">
				<h2>绝对定位布局</h2>
			</div>
			<div class="right"></div>		
		</div>
		<div class="footer">页尾</div>
	</body>
</html>


/*绝对定位理解,当元素设定绝对定位的时候,元素脱离了文档流,左右两个元素刚好靠在两边,.center元素left:200px——在外界(视图)看来就是你的右边多了200px空位置,这200px的位置刚好把挡住的.left元素显示出来,右边同理*/
3、flex

浮动布局很好理解,就一个,两边定宽,中间的设置flex:1,(占据剩余空间)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.header{
			height: 50px;
			width: 100%;
			background-color: skyblue;
			text-align: center;
		}
		.footer{
			height: 50px;
			width: 100%;
			background-color: #f2f2f2;
			text-align: center;
		}
        
        /* 此处是实现区 */
		.content{
			width: 100%;
			display: flex;
		}
        
		.left{
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.right{
			width: 200px;
			height: 200px;
			background-color: orange;
		}
		.center{
			flex: 1;
			height: 200px;
			background-color: forestgreen;
		}
	</style>
	<body>
		<div class="header">头部</div>
		<div class="content">
			<div class="left float"></div>
			<div class="center float"></div>
			<div class="right float"></div>
		</div>
		<div class="footer">页尾</div>
	</body>
</html>

4、表格布局table-cell
<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			min-height: 40px;
		}
		.header{
			width: 100%;
			background-color: skyblue;
			text-align: center;
		}
		.footer{
			width: 100%;
			background-color: #f2f2f2;
			text-align: center;
		}
		
        /* 此处是实现区 */
		.content{
			display: table;
			width: 100%;
		}
		.content>div{
			display: table-cell;
		}
        
       
		.left{
			width: 200px;
			background-color: pink;
		}
		.right{
			width: 200px;
			background-color: orange;
		}
		.center{
			background-color: forestgreen;
			
		}
	</style>
	<body>
		<div class="header">头部</div>
		<div class="content">
			<div class="left"></div>
			<div class="center">
				<h2>table 布局</h2>
			</div>
			<div class="right"></div>		
		</div>
		<div class="footer">页尾</div>
	</body>
</html>

5、网格布局grid
<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			min-height: 40px;
		}
		.header{
			width: 100%;
			background-color: skyblue;
			text-align: center;
		}
		.footer{
			width: 100%;
			background-color: #f2f2f2;
			text-align: center;
		}
		
        /* 此处是实现区 */
		.content{
			width: 100%;
			display: grid;		
			grid-template-columns: 200px auto 200px;
		}
		
		.left{
			width: 200px;
			background-color: pink;
		}
		.right{
			width: 200px;
			background-color: orange;
		}
		.center{
			background-color: forestgreen;
			
		}
	</style>
	<body>
		<div class="header">头部</div>
		<div class="content">
			<div class="left"></div>
			<div class="center">
				<h2>float 布局</h2>
			</div>
			<div class="right"></div>		
		</div>
		<div class="footer">页尾</div>
	</body>
</html>

上一篇:圆周率


下一篇:微信小程序统一服务消息下发接口 公众号和小程序消息都可以在一个接口推送了