CSS圣杯布局常用吗,CSS 经典三列布局之圣杯布局

圣杯布局

圣杯布局是典型的 CSS 布局问题，有着众多的解决方案。

圣杯布局是一种非常经典和常用的布局方式，其所指的是三列布局，中间宽度自适应，两边定宽；或者两列布局，主体宽度自适应，左边或右边定宽。

边栏应流动居中，定宽。

中间一栏 (主要内容) 在 HTML 源码中应该首先元素出现。

所有栏同高，忽略实际高度。

使用的 HTML 标记尽量少。

当页面内容不够充满页面时，页脚应“粘”在底部。

过程

header

main

// main放在前面先渲染

left

right

footer

设置中间三个div向左浮动，使其排列在一行

设置footer元素清除浮动，阻止与上面的main部分重叠。

设置中间三个div的宽度，左右定宽，中间宽度自适应。

.container > div {

height: 10vh;

float: left;

}

.main {

width: 100%;

background-color: #5AEBF0;

}

.left {

width: 200px;

background-color: #F668E0;

}

.right {

width: 200px;

background-color: #F668A4;

}

1494083623x2890174022.png

主内容栏宽度变小，设置container的padding。

left盒子上去，设置left的margin-left为-100%，。

.container {

padding-left: 200px;

}

.left {

width: 200px;

background-color: #F668E0;

margin-left: -100%;

}

1494084112x2890174022.png

由于 container 设置了内边距，因此中间栏看起来就处在了网页的中间，但左右两栏由于排在中间栏的后面，且因为空间不够被挤到了中间栏的下面

left盒子移动到左边，使用相对定位，设置left属性为盒子宽度等量的负值。

.container > div {

height: 10vh;

float: left;

position: relative;

}

.left {

width: 200px;

background-color: #F668E0;

margin-left: -100%;

left: -200px; /* 或者使用 right: 200px;*/

}

1494084481x2890174022.png

最后，我们需要把右侧栏放上去，此时只需利用上面的原理把他放到 container 的右外边距的位置即可，我们需要再一次设置一个负外边距的值，它等于右侧栏的宽度

1494085959x2890174022.png