圣杯布局的原理

圣杯布局的起源

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;}

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

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

效果图：

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

.left{right:100px;}

1. 当左右设置同方向负边距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;
}

1. 当左右设置同方向负边距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;
}

优点：

• 兼容所有浏览器
• 不用JS计算中间容器宽度就能自适应

缺点：

• 采用了相对定位，既然用了相对定位(position:relative;)，何不使用绝对定位（position:absolute;），更加简单、直接、易懂！

其他

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表