圣杯布局与双飞翼布局

版权声明:本文为博主原创文章,未经博主允许不得转载。

 

前言

原谅博主low逼,定义是百度copy来的,如有错误,欢迎指正。

摘要

经典三列布局,也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念,在国内最早是由淘宝UED的工程师传播开来,在中国也有叫法是双飞翼布局。

它的布局要求有几点:

  1. 三列布局,中间宽度自适应,两边定宽;
  2. 中间栏要在浏览器中优先展示渲染;
  3. 允许任意列的高度最高;
  4. 要求只用一个额外的DIV标签;
  5. 要求用最简单的CSS、最少的HACK语句;

两栏布局(左边固定宽度,右边自动适应)

1.固定块放到自适应div内,让自适应div左外边距加200,之后内部的固定元素左外边距-200

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
* {
margin: 0;
padding: 0;
}

.left {
width: 200px;
height: 100px;
background: red;
float: left;
margin-left: -200px;
}

.right {
height: 100px;
margin-left: 200px;
background: blue;
}
1
2
3
4
5
6
<div class="right">
right
<div class="left">
left
</div>
</div>

2.利用定位固定元素绝对定位,自适应元素相对定位,自适应元素增加左外边距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
* {
margin: 0;
padding: 0;
}

.box {
height: 100px;
}

.left {
width: 200px;
height: 100px;
background: blue;
position: absolute;
left: 0;
top: 0;
}

.right {
position: relative;
right: 0;
top: 0;
margin-left: 200px;
height: 100px;
background: green;
}
1
2
3
4
<div class="box">
<div class="left">left</div>
<div class="right">right</div>
</div>

3.和第一种差不多,只不过这次用的是定位,给固定元素定位,自适应元素增加左边外边距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
* {
margin: 0;
padding: 0;
}

.right {
margin-left: 200px;
height: 100px;
background: red;
}

.left {
position: absolute;
height: 100px;
left: 0;
top: 0;
width: 200px;
background: blue;
}
1
2
<div class="left">left</div>
<div class="right">right</div>

我们来看一下下面这种,结果看起来好像也是左边固定右边自适应

4.浮动左边div

1
2
3
4
5
6
7
8
9
10
11
*{margin: 0;padding: 0;}
.left{
width: 200px;
height: 100px;
background: red;
float: left;
}
.right{
height: 100px;
background: blue;
}
1
2
3
4
5
6
<div class="left">
left
</div>
<div class="right">
right
</div>

事实呢?我们打开控制台查看一下元素,是的右边宽度是1280整个屏幕的宽度

我们把左边的div移走看一下实际右边所占的部分,是的!就是全部,所以有些方法看起来我们好像是已经实现了这种布局,其实不然

中间自适应 左右固定布局

1.左右固定分别浮动,中间元素增加左右外边距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
*{margin: 0;padding: 0;}
.box {
width: 100%;
height: 100px;
overflow: hidden;
}

.boxc {
height: 100px;
background: red;
margin: 0 200px 0 200px;
}

.boxl {
width: 200px;
height: 100px;
background: blue;
float: left;
}

.boxr {
width: 200px;
height: 100px;
background: green;
float: right
}
1
2
3
4
5
<div class="box">
<div class="boxl">left</div>
<div class="boxr">right</div>
<div class="boxc">center</div>
</div>

2.左右固定元素分别用绝对定位,中间元素增加左右外边距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
*{margin: 0;padding: 0;}
.left {
width: 200px;
height: 100px;
background: green;
position: absolute;
left: 0;
top: 0;
}

.center {
margin-left:200px;
background: red;
height: 100px;
margin-right: 200px;
}

.right {
width: 200px;
height: 100px;
background: blue;
position: absolute;
right: 0;
top: 0;
}
1
2
3
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>

中间固定 左右自适应

一开始思路有点问题,这个我研究半天才研究出这个来,好羞愧!!!!TvT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
* {
margin: 0;
padding: 0;
}

.box {
position: relative;
margin-left: 100px;
margin-right: 100px;
}

.left {
width: 50%;
height: 100px;
background: red;
position: absolute;
right: 50%;
margin-right: 100px;
top: 0;
}

.right {
width: 50%;
height: 100px;
background: blue;
position: absolute;
left: 50%;
margin-left: 100px;
top: 0;
}

.center {
width: 200px;
margin: 0 auto;
height: 100px;
background: green;
}
1
2
3
4
5
<div class="box">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>

暂时只想到这一种方法,不知道有木有更简单粗暴的方法!欢迎吐槽;

总结

这么多布局我们看到都是浮动定位解决,其实还有很多种解决方法,只是我没想到,有更好或者其它的方法实现的话,欢迎大家一起来讨论!!
大家可以自己写写右边固定左边自适应来练练手