圣杯布局是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染。下面本篇文章就来给大家介绍一下css圣杯布局,希望对大家有所帮助。
圣杯布局是什么三列布局,中间宽度自适应,两边定宽;
中间栏要在浏览器中优先展示渲染;
实现
HTML代码如下:
实现一:使用浮动
1、先给左右列固定宽度,然后给中间列的宽设为100%,都设置为向左浮动:#middle {
background-color: lightpink;
height: 300px;
width: 100%;
float: left;
}
#left {
background-color: red;
height: 300px;
width: 100px;
float: left;
}
#right {
background-color: aqua;
height: 300px;
width: 100px;
float: left;
}
此时它的效果为:
2、让左右列与中间列显示在一行
给#left设置margin-left: -100%;,给#right设置margin-left: -100px;,那么此时我的页面显示为:
但是有没有发现我的middle这个字不见了,那是因为被压住了,此时我的左右列覆盖到了中间列上面
3、中间盒子自适应
那么想让中间盒子自适应,就给我们的父元素加padding值:#container {
padding: 0 100px;
}
此时的效果为:
与上面的图相比,两边多了空,那么此时我的middle还是没有出现,所以说明我的左右两列还是压着中间那列的,所以我们就应该将左右两列给加定位,然后让他们分别向左右移动:#left {
position: relative;
left: -100px;
}
#right {
position: relative;
right: -100px;
}
此时我们的圣杯布局就完成啦:
实现二:用flex布局
使用flex布局就简单多了呢,代码如下:#middle {
background-color: lightpink;
height: 300px;
display: flex;
flex:1;/*简写,1,1,auto的意思*/
}
#left {
background-color: red;
height: 300px;
flex: 0 0 100px;/*默认为横向的,所以这里的100px相当于宽度*/
order:-1;/*设置left的位置在middle之前*/
}
#right {
background-color: aqua;
height: 300px;
flex: 0 0 100px;/*默认为横向的,所以这里的100px相当于宽度*/
}
#container{
display: flex;
flex:1;/*简写,1,1,auto的意思*/
}
那么我们的圣杯布局也就完成啦:
更多前端开发知识,请查阅 HTML中文网 !!