圣杯布局与双飞翼布局

圣杯布局与双飞翼布局

圣杯布局

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
<html>
<head>
<title>圣杯布局</title>
<style>
.container{
padding:0 200px;
}

.center, .left, .right{
float:left;
width:200px;
position:relative;
}

.center{
width:100%;
background-color:red;
}

.left{
left:-200px;
margin-left:-100%;
background-color:green;
}

.right{
left:200px;
margin-left:-200px;
background-color:blue;
}

</style>

</head>
<div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</html>

思路:
1.最初

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<title>圣杯布局</title>
<style>
.center{
background-color:red;
}

.left{
background-color:green;
}

.right{
background-color:blue;
}

</style>

</head>
<div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</html>

效果如图1(这里为了看的清楚,为三列分别设了不同的背景色)

图1
2.为保证center可以撑满浏览器,宽度应该设为100%,left和right的宽度随意,这里统一设为200px。修改后:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<title>圣杯布局</title>
<style>
.center{
background-color:red;
width:100%:
}

.left{
background-color:green;
width:200px;
}

.right{
background-color:blue;
width:200px;
}

</style>

</head>
<div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</html>

效果如图2所示

图2
3.利用浮动元素的负边距进行定位

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
<html>
<head>
<title>圣杯布局</title>
<style>
.center{
float:left;
width:100%;
background-color:red;
}

.left{
float:left;
width:200px;
background-color:green;
margin-left:-100%;
}

.right{
float:left;
width:200px;
background-color:blue;
margin-left:-200px;
}

</style>

</head>
<div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>

效果如图3所示

图3
4.此时left与right已完成,需要对center进行定位。在container中设置padding:

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
<html>
<head>
<title>圣杯布局</title>
<style>
.container{
padding:0 200px;
}

.center{
float:left;
width:100%;
background-color:red;
}

.left{
float:left;
width:200px;
background-color:green;
margin-left:-100%;
}

.right{
float:left;
width:200px;
background-color:blue;
margin-left:-200px;
}

</style>

</head>
<div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>

效果如图4所示

图4
5.此时center已正确定位,left和right收到container的padding影响,位置发生了偏移。需要利用relative,将left与right分别向左/右移动200px完成定位:

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
<html>
<head>
<title>圣杯布局</title>
<style>
.container{
padding:0 200px;
}

.center{
float:left;
width:100%;
background-color:red;
}

.left{
position:relative;
left:-200px;
float:left;
width:200px;
background-color:green;
margin-left:-100%;
}

.right{
position:relative;
left:200px;
float:left;
width:200px;
background-color:blue;
margin-left:-200px;
}

</style>

</head>
<div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>

双飞翼布局

双飞翼布局主要在中间一列(main-inner)的外面新增了一个main-outer
main-outer用于确定宽度等信息,这里的main-outer功能与上面的圣杯布局中前三步完全相同。
main-inner用于设置padding,直接将main中的内容放置正确位置,不需再对left和right进行设置

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
<html>
<head>
<title>双飞翼布局</title>
<style>
.main-outer, .left, .right{
float:left;
width:200px;
}

.main-outer{
width:100%;
background-color:red;
}

.left{
background-color:green;
margin-left:-100%;
}

.right{
background-color:blue;
margin-left:-200px;
}

.main-inner{
padding:0 200px;
}

</style>

</head>
<div class="main-outer">
<div class="main-inner">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</html>

区别

  • 两者均利用了浮动&负边距
  • 圣杯布局用一个container包含了center,left,right,在通过设置container中padding的方式完成center位置的确定,之后为了避免left与right对main的覆盖,通过相对定位的方式将他们移动至特定位置
  • 双飞翼布局在main-inner外部嵌套了一层main-outer,这里的left和right实际上是覆盖了outer的,但由于在main-inner中设置了padding,左右两边的覆盖并不会影响到main-inner

本文首发于http://www.miaoyunze.com/,转载请注明出处