写过几次圣杯布局和双飞翼布局,但是老是忘记,还是自己总结一篇博客来梳理一遍~
圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,它们实现的效果是一样的,差别在于其实现的思想。
圣杯布局:
- 首先写这样三个div注意要优先渲染中间栏,所以要写在最上面。并且要设置自适应width:100%;
1
2
3
4<div id="container">
<div id="main">main</div>
<div id="left">left</div>
<div id="right">right</div> - 给出每个盒子的样式,都设置左浮动。
;
- 这时候就要使用负边距了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20#main{
background:red;
height:100px;
width:100%;
float:left;
}
#left{
width:100px;
height:100px;
margin-left:-100%;
background:yellow;
float:left;
}
#right{
width:100px;
height:100px;
background:grey;
float:left;
margin-left:-100px;
} - 但是现在中间栏的内容会被左右两个div遮挡,所以 在最外层边框设置内边距,然后将左右两个盒子position:relative; 然后再设置定位~~
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#main{
background:red;
height:100px;
width:100%;
float:left;
}
#left{
width:100px;
height:100px;
margin-left:-100%;
background:yellow;
float:left;
position:relative;
left:-100px;
}
#right{
width:100px;
height:100px;
background:grey;
float:left;
margin-left:-100px;
position:relative;
left:100px;
}
#container{
padding: 0 100px;
};
双飞翼布局:
不同在于解决”中间栏div内容不被遮挡“问题的思路不一样:圣杯布局,为了中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div。双飞翼布局,为了中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该子div里用margin-left和margin-right为左右两栏div留出位置。
main
left
right
#mini{
margin-left:100px;
margin-right:100px;
}
顺便,就看看负边距的内容