CSS布局之圣杯布局与双飞翼布局

按照我的理解，其实圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。
圣杯布局

实现原理
html代码中，middle部分首先要放在container的最前部分，然后是left，right
1.将三者都设置 float:left, position:relative (因为相对定位后面会用到）
2.middle设置 width:100% 占满一行
3.此时middle占满一行，所以要把left拉到middle所在行的最左边，使用 margin-left:-100%
4.这时left拉回到middle所在行的最左边，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上 padding:0 210px
5.middle内容拉出来了，但left也跟着出来了，所以要还原，就对left使用相对定位 left:-210px
6.同理，right要拉到middle所在行的最右边，使用 margin-left:-210px，right:-210px
实现代码
Javascript Code复制内容到剪贴板

1.     
2.     
3.     
4.     
5.     
6.     
7. body {    
8. text-align: center;;    
9. }   
10. #demo {    
11. margin: auto;    
12. }   
13. #header, #footer {    
14. height: 50px;    
15. background-color: #aaa;    
16. }   
17. #container {    
18. overflow: hidden;    
19. margin: 10px 0;    
20. padding:0 210px;    
21. }   
22. #left {    
23. background-color: red;    
24. float:left;    
25. position:relative;    
26. left:-210px;    
27. width:200px;    
28. margin-left:-100%;    
29. }   
30. #right {    
31. background-color: green;    
32. width: 200px;    
33. margin-left: -200px;    
34. float: left;    
35. right: -210px;    
36. position: relative;    
37. }   
38. #middle {    
39. background-color: blue;    
40. float:left;    
41. width:100%;    
42. }    
43.     
44.     
45.     
46. "demo">    
47. 头部    
48. "container">    
49. "middle">    
50. middle
    主内容区域    
51.     
52. "left">    
53. left
    左侧边栏区域    
54.     
55. "right">    
56. right
    右侧边栏区域    
57.     
58.     
59. 底部    
60.     
61.     
62.    

双飞翼布局

实现原理
html代码中，middle部分首先要放在container的最前部分，然后是left，right
1.将三者都设置 float:left
2.middle设置 width:100% 占满一行
3.此时middle占满一行，所以要把left拉到middle所在行的最左边，使用 margin-left:-100%，同理right使用 margin-left:-200px
4.此时middle的内容被覆盖，要把middle的内容拉出来，除了使用外围container的padding，还可以考虑使用margin，给middle增加一个内层div -- middle_content, 然后设置 margin:0 210px
实现代码

Javascript Code复制内容到剪贴板

1.     
2.     
3.     
4.     
5.     
6.     
7. body {    
8. text-align: center;;    
9. }   
10. #header, #footer {    
11. height: 50px;    
12. background-color: #aaa;    
13. }   
14. #container {    
15. overflow: hidden;    
16. margin: 10px 0;    
17. }   
18. #left {    
19. background-color: red;    
20. float:left;    
21. width:200px;    
22. margin-left: -100%;    
23. }   
24. #right {    
25. background-color: green;    
26. width: 200px;    
27. float: left;    
28. margin-left: -200px;    
29. }   
30. #middle {    
31. float: left;    
32. width: 100%;    
33. }   
34. #middle_content {    
35. background-color: blue;    
36. margin: 0 210px;    
37. }    
38.     
39.     
40.     
41. "demo">    
42. 头部    
43. "container">    
44. "middle">    
45. "middle_content">    
46. middle_content
    主内容区域    
47.     
48.     
49. "left">    
50. left
    左侧边栏区域    
51.     
52. "right">    
53. right
    右侧边栏区域    
54.     
55.     
56. 底部    
57.     
58.     
59.   

关于CSS布局之圣杯布局与双飞翼布局 的相关知识就给大家介绍这么多，希望对大家有所帮助！