圣杯布局的原理

全栈程序员-站长 • 2022年6月28日下午10:46 • 未分类 • 阅读 25

大家好，又见面了，我是你们的朋友全栈君。

圣杯布局的起源

In Search of the Holy Grail

圣杯布局解决的问题

两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。

圣杯布局的原理

HTML代码

<div class="content">
    <div class="center col">
    </div>
    <div class="left col">
    </div>
    <div class="right col">
    </div>
</div>

CSS代码

第一步：定义容器content的样式padding: 0 100px，以及center，left，right的公共样式，同时定义每个容器的颜色和宽度，左右固定一百，中间100%；

.content{ 
   padding: 0 100px;}
.col{ float: left; height: 200px; position: relative; }
.left,.right{ width: 100px; }
.left{ background-color: blue; }
.right{ background-color: green; }
.center{ width: 100%; background-color: pink; }

效果图：
基础样式效果图

第二步：采用负边距将left和right放到左右两边
1. 当左右设置不同方向负边距margin-left和margin-right

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

当左右设置同方向负边距margin-left

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

效果图：
采用负边距定位效果图

此时我们可以清晰的看到center的左右两边都被left和center遮挡，此时圣杯布局如何处理呢？
第三步：用相对定位来解决
1. 当左右设置不同方向负边距margin-left和margin-right

.left{ 
   right:100px;}

当左右设置同方向负边距margin-left

.left{ 
   right:100px;}
.right{ 
   left:100px;}

最终效果和CSS代码

效果图：
相对定位后的效果图
1. 当左右设置不同方向负边距margin-left和margin-right

.content{ 
   padding: 0 100px;}
.col{ float: left; height: 200px; position: relative; }
.left,.right{ width: 100px; }
.left{ background-color: blue; margin-left: -100%; right: 100px; }
.right{ background-color: green; margin-right: -100px; }
.center{ width: 100%; background-color: pink; }

当左右设置同方向负边距margin-left

.content{ 
   padding: 0 100px;}
.col{ float: left; height: 200px; position: relative; }
.left,.right{ width: 100px; }
.left{ background-color: blue; margin-left: -100%; right: 100px; }
.right{ background-color: green; margin-left: -100px; left:100px; }
.center{ width: 100%; background-color: pink; }