双飞翼布局和圣杯布局

发表于 分类于 阅读次数：

双飞翼布局和圣杯布局


圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。

双飞翼布局

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
.wrap{
    width: 200px;
    height: 200px;
    margin: 200px auto;
}
.main,.left,.right{
    float: left;
    height: 200px;
}
.main{
    width: 100%;
    background-color: #C899FF;
}
.main p{
    margin: 0 60px 0 40px;
    height: 200px;
}
.left{
    width: 40px;
    background-color: #EBAD5A;
    margin-left: -100%;
}
.right{
    width: 60px;
    background-color: #348F26;
    margin-left: -60px;
}

HTML

1
2
3
4
5
6
7
<div class="wrap">
    <div class="main">
        <div>mainmainmainmain</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</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
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#bd{
    /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
    padding:0 200px 0 180px;
    height:100px;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
    /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
    position:relative;
    left:-180px;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
    /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
    position:relative;
    right:-200px;
}
#footer{
    height:50px;
    background: #666;
    text-align: center;
}

HTML

1
2
3
4
5
6
7
<div id="hd">header</div>
<div id="bd">
    <div id="middle">middle</div>
    <div id="left">left</div>
    <div id="right">right</div>
</div>
<div id="footer">footer</div>