圣杯布局的原理
圣杯布局的起源
圣杯布局解决的问题
两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。
圣杯布局的原理
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;
}优点：
- 兼容所有浏览器
- 不用JS计算中间容器宽度就能自适应
缺点：
- 采用了相对定位，既然用了相对定位(position:relative;)，何不使用绝对定位（position:absolute;），更加简单、直接、易懂！
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017/11/24 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
