圣杯布局以及双飞燕布局_css 双飞燕圣杯-CSDN博客

本文链接：https://blog.csdn.net/m0_37650418/article/details/103256042

布局的样式：两边定宽，中间自适应的三栏布局，中间栏放在文档流前面以优先渲染
在这里插入图片描述

圣杯布局

1.三块都设置向左浮动且使用相对定位；
2.包含三块的父元素设置左右的padding值，给左右两部分留出空间；
3.中间块宽度设置为100%；
4.左右两边设置负边距margin-left，左部分设置-100％，右部分设置-width；
5.左右部分为相对定位，左部分left的为-width，右部分right为-width。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>圣杯布局</title>
	</head>
	<body>
		<div id="container">
			<div id="main" class="col"></div>
			<div id="left" class="col"></div>
			<div id="right" class="col"></div>
		</div>
	</body>
</html>
<style type="text/css">
	.col {position: relative;float: left;}
	#container {padding: 0 200px 0 200px;background: firebrick;height: 400px;}
	#main {width: 100%;height: 400px;background-color: #ccc;}
	#left {width: 200px;height: 400px;margin-left: -100%;left: -200px;background-color: #0000FF;}
	#right {width: 200px;height: 400px;margin-left: -200px;right: -200px;background-color: #FF0000;}
</style>

会存在的问题是当中间的宽度没有两边的宽时，布局会有问题

双飞燕布局

1.中间块加个子节点，三块同样设置向左浮动；
2.中间宽度设置100%，子元素设置margin值，给左右两边留白；
3.左右两边设置负边距margin-left，左部分设置-100％，右部分设置-width；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>双飞燕布局</title>
	</head>
	<body>
		<div id="container">
			<div id="main" class="col">
				<div id="main-wrap">qqqq</div>
			</div>
			<div id="left" class="col"></div>
			<div id="right" class="col"></div>
		</div>
	</body>
</html>
<style type="text/css">
	.col {float: left;}
	#main {width: 100%;height: 400px;background-color: #ccc;}
	#main-wrap{margin: 0 190px 0 190px;}
	#left {width: 200px;height: 400px;margin-left: -100%;background-color: #0000FF;}
	#right {width: 200px;height: 400px;margin-left: -200px;background-color: #FF0000;}
</style>