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. <!DOCTYPEHTML>
  2. <htmllang="en-US">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>圣杯布局</title>
  6. <styletype="text/css">
  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:10px0;
  20. padding:0210px;
  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. </style>
  44. </head>
  45. <body>
  46. <divid="demo">
  47. <headerid="header">头部</header>
  48. <divid="container">
  49. <divid="middle">
  50. middle<br>主内容区域
  51. </div>
  52. <divid="left">
  53. left<br>左侧边栏区域
  54. </div>
  55. <divid="right">
  56. right<br>右侧边栏区域
  57. </div>
  58. </div>
  59. <footerid="footer">底部</footer>
  60. </div>
  61. </body>
  62. </html>

双飞翼布局

实现原理
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. <!DOCTYPEHTML>
  2. <htmllang="en-US">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>双飞翼布局</title>
  6. <styletype="text/css">
  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:10px0;
  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:0210px;
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <divid="demo">
  42. <headerid="header">头部</header>
  43. <divid="container">
  44. <divid="middle">
  45. <divid="middle_content">
  46. middle_content<br>主内容区域
  47. </div>
  48. </div>
  49. <divid="left">
  50. left<br>左侧边栏区域
  51. </div>
  52. <divid="right">
  53. right<br>右侧边栏区域
  54. </div>
  55. </div>
  56. <footerid="footer">底部</footer>
  57. </div>
  58. </body>
  59. </html>

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

以上就是CSS布局之圣杯布局与双飞翼布局。心态是横在人生路上的双向门，大家能够把它转向一边进入成功，也可以把它转到另一边，进入失败。更多关于CSS布局之圣杯布局与双飞翼布局请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
面试必问:圣杯布局和双飞翼布局的区别
浅谈css双飞翼布局和圣杯布局
CSS的三列式"圣杯布局"方案完全解析
css多种方式如何实现双飞翼布局