圣杯布局和双飞翼布局介绍

圣杯布局介绍

圣杯布局是讨论「三栏液态布局」的实现,它最早出自于谁或许不得而查了,但最早的完美实现是来自于 Matthew Levine 于2006年在「A LIST APART」上写的一篇文章,它主要讲述了网页中关于最佳圣杯的实现方法。地址

所谓液态布局是相对固态布局而言的,固态布局就是固定值不变的布局,液态就好比在容器里到了一杯水,它可以随着容器宽度的变化而自适应宽度。

一般来说,在正常的DOW树中表现为先写Left,然后Middle,最后Right,它可能会导致代码不够灵活,尤其是从DOM的载入顺序来说,中间的内容不能被首先加载;

因此提出者给出了一个较好的方案:

  1. 两边带有固定宽度中间可以流动(fluid);
  2. 允许中间一栏最先出现;
  3. 允许任意一栏放在最上面;
  4. 仅需一个额外的 div 标签
  5. 仅需非常简单的 CSS,带上最少的兼容性补丁

最终效果:地址

实现方式

例如,我们现在需要一个左边宽度为200px,右边宽度为150px,中间宽度为流动的布局;

基本html代码:

1
2
3
4
5
6
7
<div id="header">#header</div>
<div id="container">
<div id="center" class="column">#center</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>

css部分:

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
38
39
40
41
42
43
44
45
46
#container {
padding-left: 200px;
padding-right: 150px;
overflow: hidden;
}

#container .column {
height: 200px;
position: relative;
float: left;
}

#center {
background: #e9e9e9;
width: 100%;
}

#left {
width: 200px;
right: 200px;
background: red;
margin-left: -100%;
}

#right {
width: 150px;
background: blue;
margin-right: -150px;
}

#footer {
clear: both;
}

#header,
#footer {
background-color: #c9c9c9;
text-align: center;
padding: 20px 0;
color: #fff;
}
/*** IE6 Fix ***/
* html #left {
left: 150px;
/* RC width */
}

双飞翼布局介绍

与圣杯布局相比,双飞翼HTML中为中间元素添加了一个子元素center-wrap,这个小小的改动是为了之后处理中间内容被遮盖的问题,这也是两者实现方式最大的不同点,下面继续。

基本html结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="container">
<div id="center" class="col">
<div id="center-wrap">
#center
</div>
</div>
<div id="left" class="col">
#left
</div>
<div id="right" class="col">
#right
</div>
</div>
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
.col {
float: left;
}

#center {
width: 100%;
height: 400px;
background-color: #ccc;
}

#center-wrap {
margin: 0 150px 0 200px;
}

#left {
width: 200px;
height: 400px;
margin-left: -100%;
background-color: #0000FF;
}

#right {
width: 150px;
height: 400px;
margin-left: -150px;
background-color: #FF0000;
}

最终效果:地址

总结:

与圣杯布局相比较,双飞翼布局相对来说能更好的理解,代码量也相对较少,也没有使用相对定位这些敏感的属性, 建议使用双飞翼布局;

本文结束感谢您的阅读
0%