圣杯布局和双飞翼布局实现原理

最新推荐文章于 2022-03-06 16:04:38 发布

原创最新推荐文章于 2022-03-06 16:04:38 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#布局 #css #负margin

本文介绍圣杯布局和双飞翼布局两种三列布局方法，这两种布局均能使中间内容自适应，两侧内容固定宽度，并确保重要内容优先渲染。圣杯布局通过浮动、负边距及相对定位实现，而双飞翼布局则通过增加一层嵌套标签并利用浮动和负边距达成目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

圣杯布局和双飞翼布局

圣杯布局和双飞翼布局，他们的都要求三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以优先渲染。

圣杯布局：用到浮动、负边距、相对定位（relative），不添加额外标签

实现原理 ：

html代码中，middle部分首先要放在container的最前部分，然后是left，right 

1.将三者都设置 float:left

2.middle设置 width:100% 占满一行 

3.此时middle占满一行，所以要把left放到middle所在行的最左边，使用 margin-left:-100%；（middle的宽度） 

right放到最右边，margin-left:-200px;(right自身的宽度)

4.这时left回到middle所在行的最左边，right回到middle所在行的最右边，但会覆盖middle内容的左右端，要把middle内容挤到中间，所以在外围container加上 padding:0 200px 0 100px; 

5.middle内容挤出来了，但left和right也跟着出来了，所以要还原，使用相对定位position:relative; 对left使用 left:-100px; right使用right:-200px 

实现代码：

<header>header内容</header>
    <div class="container">
	<div class="middle">
	    弹性区:圣诞费共和国节读书圣诞节护法放大后付款就是你发圣诞费共和国节读书圣诞节护法放大后付款就是你发圣诞费共和国节读书圣诞节护法放大后付款就是你发圣诞费共和国节读书圣诞节护法放大后付款就是你发
	</div>
	<div class="left">左边栏</div>
	<div class="right">右边栏</div>
    </div>
<footer>footer内容</footer>

<style type="text/css">
	body{
		padding: 0;
		margin: 0;
	}
	header,footer{
		width: 100%;
		height: 100px;
		background-color: lightblue;
		color: #23272B;
	}
	.container{
		overflow: hidden;
		padding: 0 200px 0 100px;
		/*【2】设置左右padding，把所有内容挤到中间，下一步进行定位，防止内容被左右的块盖住*/
	}
	.middle{
		float: left;
		background-color: lightcoral;
		color: #23272B;
		width: 100%;
		height: 200px;
	}
	.left{
		float: left;
		background-color: lightslategray;
		color: #23272B;
		width: 100px;
		height: 200px;
		margin-left: -100%;
		/*【1】使用负边距,让左边的块移动到正确位置*/
		position: relative;
		left: -100px;
		/*【3】使用相对定位,元素不脱离文档流,相对自身原本位置向左偏移*/
	}
	.right{
		float: left;
		background-color: lightseagreen;
		color: #23272B;
		width: 200px;
		height: 200px;
		margin-left: -200px;
		/*【1】使用负边距,让右边的块移动到正确位置*/
		position: relative;
		right: -200px;
		/*【3】使用相对定位,元素不脱离文档流,相对自身原本位置向右偏移*/
	}
</style>

在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多，那么有没其他方法更加简洁方便呢？

在淘宝UED探讨下，增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局。

双飞翼布局：用到浮动、负边距、添加额外标签

DOM结构：main内层增加了一个div

实现原理 ：

html代码中，middle部分首先要放在container的最前部分，然后是left，right 

1.将三者都设置 float:left 

2.middle设置 width:100% 占满一行 

3.此时middle占满一行，所以要把left放到middle所在行的最左边，使用 margin-left:-100%；（middle的宽度），right放到最右边，margin-left:-200px;(right自身的宽度)

4.此时middle的内容被覆盖，要把middle的内容拉出来，除了使用外围container的padding，还可以考虑使用margin，给middle增加一个内层div .middle-warp, 然后设置 margin:0 200px 0 100px

实现代码：

<header>header内容</header>
<div class="container">
    <div class="middle">
        <div class="middle-warp">弹性区:圣诞费共和国节读书圣诞节护法放大后付款就是你发圣诞费共和国节读书圣诞节护法放大后付款就是你发圣诞费共和国节读书圣诞节护法放大后付款就是你发圣诞费共和国节读书圣诞节护法放大后付款就是你发</div>
    </div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
</div>
<footer>footer内容</footer>

<style type="text/css">
			body{
				padding: 0;
				margin: 0;
			}
			header,footer{
				width: 100%;
				height: 100px;
				background-color: lightblue;
				color: #23272B;
			}
			.container{
				overflow: hidden;
			}
			.middle{
				float: left;
				background-color: lightcoral;
				color: #23272B;
				width: 100%;
				height: 200px;
			}
			.middle-warp{
				/*给内标签使用margin*/
				margin-left: 100px;
				margin-right: 200px;
			}
			.left{
				float: left;
				background-color: lightslategray;
				color: #23272B;
				width: 100px;
				height: 200px;
				margin-left: -100%;
			}
			.right{
				float: left;
				background-color: lightseagreen;
				color: #23272B;
				width: 200px;
				height: 200px;
				margin-left: -200px;
			}
</style>