css和css的圣杯布局,CSS常用布局实现05-圣杯布局和双飞翼布局

1. 简介

其实对于三列布局的实现，之前网上使用最多的还是这两种。它们有一个共同的优点，就是可以使主内容优先加载。当然，如果不考虑兼容，flex和grid还是优先推荐的。

2.实现

我们直接上代码，代码中有详细注释：

圣杯布局vs双飞翼布局

* {

margin:0;

padding: 0;

}

section {

margin-bottom: 10px;

}

/*虽然清除了浮动，但需要注意的是负margin引发的副作用，section其实包含了left和right负margin前的内容高度*/

.clearfix:after {

display: table;

content: '.';

visibility: hidden;

clear: both;

}

.holy-grail .wrap {

padding: 0 200px;

}

.holy-grail .main {

width: 100%;

float: left;

background: red;

}

.holy-grail .left {

width: 200px;

float: left;

background: green;

margin-left: -100%;

position: relative;

left: -200px;

}

/*这里设置margin-right可以代替注释的三行代码的效果*/

.holy-grail .right {

width: 200px;

float: left;

background: blue;

/*margin-left: -200px;*/

/*position: relative;*/

/*left: 200px;*/

margin-right: -200px;

}

main content

main content

main content

left content

right content

.double-wings .main {

width: 100%;

float: left;

}

.double-wings .left {

width: 200px;

float: left;

background: green;

margin-left: -100%;

}

.double-wings .right {

width: 200px;

float: left;

background: blue;

margin-left: -200px;

}

.double-wings .inner {

background: red;

margin: 0 200px;

}

main content

main content

main content

left content

right content