css圣杯模式的HTML代码,css圣杯布局是什么？

圣杯布局是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。下面本篇文章就来给大家介绍一下css圣杯布局，希望对大家有所帮助。

圣杯布局是什么三列布局，中间宽度自适应，两边定宽；

中间栏要在浏览器中优先展示渲染；

实现

HTML代码如下：

middle

left

right

实现一：使用浮动

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中文网 ！！