圣杯布局、双飞翼布局具体实现原理和实现方法

article/2025/9/27 18:54:25

为啥写这篇文章

网上关于这两种布局的文章大多数都只是给了代码实现，而没有说出其中关键性代码的作用和原理。

布局实现的目的

1.三列布局，两端固定宽度(其实可以不用固定宽度），中间栏自适应。
2.中间栏优先渲染。
3.任意栏高度自由不限制。

效果展示

在这里插入图片描述

布局实现

一.圣杯布局

1.由于要实现中间栏先渲染，所以需要将center放置前面。

    <div class="content1 box"><div class="center">center</div><div class="left">left</div><div class="right">right</div></div>

2.将center，left，right设置浮动，并设置宽度。

        .box {overflow: hidden;}.box div{text-align: center;font-size: 30px;}.content1 div {float: left;min-height: 300px;}.content1 .center {width: 100%;background: #9ab;}.content1 .left {width: 300px;background: #aaa;}.content1 .right {width: 300px;background: #ddd;}

效果如下。
在这里插入图片描述
3.接下来是最为关键的步骤，设置left的margin-left为-100%，right的margin-left为本身宽度的负值。

        .box {overflow: hidden;}.box div{text-align: center;font-size: 30px;}.content1 div {float: left;min-height: 300px;}.content1 .center {width: 100%;background: #9ab;}.content1 .left {width: 300px;margin-left: -100%;//关键步骤background: #aaa;}.content1 .right {width: 300px;margin-left: -300px;//关键步骤background: #ddd;}

效果如下。
在这里插入图片描述

首先，left为什么要使用margin-left：-100%，right要使用margin-left: -300px呢？

原理：当给margin添加%值时，是根据父元素的宽度来计算的，所以当设置margin-left：-100%后，left刚好被移动到上一行相同位置。而right不需要移动到上一行相同位置，只需要自身在上一行就行，所以只需要设置margin-left为自身的宽度负值后，自动会往上行排。通过动图不难看出来。
在这里插入图片描述

其次，看了动图和布局结构，你应该发现了，left和right只是跑到center图层的上一层，遮挡住了center的内容，而不是排挤了center的内容。加过多的字可以看到center内容被遮挡了。

在这里插入图片描述
4.解决center被遮挡。
方法一

        .box {overflow: hidden;}.box div{text-align: center;font-size: 30px;}.content1 div {float: left;min-height: 300px;}.content1 .center {width: 100%;background: #9ab;padding: 0 300px;//神来之笔box-sizing: border-box;//神来之笔}.content1 .left {width: 300px;margin-left: -100%;background: #aaa;}.content1 .right {width: 300px;margin-left: -300px;background: #ddd;}

效果如下
在这里插入图片描述

解释一下为什么要这样子写

box-sizing: border-box;将容器变为怪异盒模型，使得容器实际宽度=内容宽度+边框宽度+填充宽度。那么，当我设置了padding: 0 300px;之后，内容的宽度就刚好是中间的部分了。而两边的填充宽度刚好就是left和right的宽度。

方法二
如果你看了其他人的解释，会发现大多人是使用相对布局的方法，在这儿我不多说。自行百度。

二.双飞翼布局

相对于圣杯布局来说，多加了一个容器。

<div class="content2"> <div class="main"><div class="center">center</div> </div><div class="left">left</div> <div class="right">right</div> 
</div>

这种做法看看其他的人怎么做的8 ，我主要讲的时候使用margin-left的作用和原理。😏