圣杯布局与双飞翼布局

圣杯布局
双飞翼布局

圣杯布局和双飞翼布局都是非常好用的布局方式。两者的功能相同，都是实现一个三栏布局，其中两侧宽度固定，中间宽度自适应，又叫做固比固布局。

圣杯布局

有3中实现方式：
①不要求优先渲染中间(class=‘center’)部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圣杯与双飞翼</title>
		<style>
			body{
				margin: 0;
			}
			.box{
				width: 100%;
			}
			.left,.right{
				float: left;
				width: 200px;
				height: 200px;
				background-color: #FF8C00;
			}
			.center{
				float: left;
				width: calc(100% - 400px);
				height: 200px;
				background-color: #90EE90;
			}
			.box:after{
				display: block;
				content: '';
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="left">left</div>
			<div class="center">center</div>
			<div class="right">right</div>
		</div>
	</body>
</html>

②要求中间部分在DOM结构上优先，以便先行渲染
先设置box的padding和box-sizing为左右两列预留位置，然后把左右两列直接定位到预留的对应位置上。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圣杯与双飞翼</title>
		<style>
			body{
				margin: 0;
			}
			
			.box{
				width: 100%;
				height: 200px;/*position:absolute造成的影响不能用清浮动的方式清除，可以设置高度*/
				position: relative;
				padding: 0 300px 0 200px;
				box-sizing: border-box;
			}
			
			.left{
				position: absolute;
				left: 0;
				top: 0;
				width: 200px;
				height: 200px;
				background-color: #FF8C00;
			}
			.right{
				position: absolute;
				right: 0;
				top: 0;
				width: 300px;
				height: 200px;
				background-color: #FF8C00;
			}
			.center{
				width: 100%;
				height: 200px;
				background-color: #90EE90;
			}
			</style>
	</head>
	<body>
		<div class="box">
			<div class="center">center</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>
</html>

③要求中间部分在DOM结构上优先，以便先行渲染
首先设置box宽度、padding等为左右两列预留位置，然后设置三列的宽高、浮动以及父元素浮动的清除。

<style>
	body{
		margin: 0;
	}
			
	.box {
		width: 100%;
		background-color: #CCCCCC;
		padding: 0 300px 0 200px; 
		box-sizing: border-box;
	}
	.center,.left,.right {
		float: left;
	}
	.center {
		width: 100%;
		height: 200px;
		background-color: #90EE90;
	}
	.left {
		width: 200px; 
		height: 200px;
		background-color: #FF8C00;
	}
	.right {
		width: 300px; 
		height: 200px;
		background-color: #CEECEC;
	}
			
	.box:after {
		display: block;
		content: '';
		height: 0;
		clear: both;
	}
</style>

结果如下：

将左右两列放到预留对应的位置上：

.left {
	margin-left: -100%;
	transform: translateX(-200px);
	//position: relative;
	//left: -200px; 
}
.right {
	margin-right: -300px; 
}

结果如下：

至此，布局效果完成。不过要想保证该布局效果正常显示，需要给定页面一个最小的宽度，但这并不只是简单的200+300=500px。回想之前left使用了transform，所以就意味着在center开始的区域，还存在着一个left的宽度。所以页面的最小宽度应该设置为200+300+200=700px；

全部代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圣杯与双飞翼</title>
		<style>
			body{
				margin: 0;
				min-width: 700px;/*保证页面正常显示 200+300+200*/
			}
			
			.box {
				width: 100%;
				background-color: #CCCCCC;
				padding: 0 300px 0 200px; 
				box-sizing: border-box;
			}
			.center,.left,.right {
			  float: left;
			}
			.center {
			  width: 100%;
			  height: 200px;
			  background-color: #90EE90;
			}
			.left {
			  width: 200px; 
			  height: 200px;
			  background-color: #FF8C00;
			  
			  margin-left: -100%;
			  transform: translateX(-200px);
			  /* position: relative;
			  left: -200px; */
			}
			.right {
			  width: 300px; 
			  height: 200px;
			  background-color: #CEECEC;
			  margin-right: -300px; 
			}
			
			.box:after {
				display: block;
				content: '';
				height: 0;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="center">center</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>
</html>

双飞翼布局

1. DOM结构
双飞翼布局与圣杯布局dom结构不同：

<body>
		<div class="box">
			<div class="center">center</div>
		</div>
		<div class="left">left</div>
		<div class="right">right</div>
		<div style='clear: both;'>footer 纯粹清浮动的</div>
</body>

2. CSS代码
按照与圣杯布局相同的思路，首先设置各列的宽度与浮动，并且为左右两列预留出空间，最后设置浮动清除：

<style>
	body{
		margin: 0;
	}
			
	.box,.left,.right {
		float: left;
	}
	.box {
		width: 100%;
	}
	.center {
		height: 200px;
		margin: 0 300px 0 200px; 
		background-color: #90EE90;
	}
	.left {
		width: 200px; 
		height: 200px;
		background-color: #FF8C00;
	}
	.right {
		width: 300px; 
		height: 200px;
		background-color: #FF8C00;
	}
</style>

结果如下：

由于box设置了浮动而center未设置浮动，所以其宽度默认为box宽度的100%，通过对其设置margin-left和margin-right为左右两列预留出了空间。
将左右两列left和right放到对应预留位置：

.left {
	margin-left: -100%;
}
.right {
	margin-left: -300px; 
}

结果如下：

最后计算最小页面宽度：200+330=500px。

body{
	min-width: 500px;
}

全部代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双飞翼布局</title>
		<style>
			body{
				margin: 0;
				min-width: 500px;
			}
			
			.box,.left,.right {
			  float: left;
			}
			.box {
				width: 100%;
			}
			.center {
			  height: 200px;
			  margin: 0 300px 0 200px; 
			  background-color: #90EE90;
			}
			.left {
			  width: 200px; 
			  height: 200px;
			  background-color: #FF8C00;
			  margin-left: -100%;
			}
			.right {
			  width: 300px; 
			  height: 200px;
			  background-color: #CEECEC;
			  margin-left: -300px; 
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="center">center</div>
		</div>
		<div class="left">left</div>
		<div class="right">right</div>
		<div style='clear: both;'>footer 纯粹清浮动的</div>
	</body>
</html>

文章参考于：https://www.jianshu.com/p/81ef7e7094e8

来源：CSDN

作者：Jqy_111

链接：https://blog.csdn.net/Jqy_111/article/details/104494178

标签

双飞翼