大家好,又见面了,我是你们的朋友全栈君。
圣杯布局的起源
圣杯布局解决的问题
两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。
圣杯布局的原理
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;),更加简单、直接、易懂!
其他
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/148520.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...