您现在的位置是：网站首页> 编程资料编程资料

CSS布局之圣杯布局与双飞翼布局 浅谈css双飞翼布局和圣杯布局CSS的三列式"圣杯布局"方案完全解析面试必问:圣杯布局和双飞翼布局的区别

2023-10-23 234人已围观

简介 圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。接下来通过本文教程给大家介绍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. "en-US">    
  3.     
  4. "UTF-8">    
  5. 圣杯布局    
  6. "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: 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. "header">头部    
  48. "container">    
  49. "middle">    
  50. middle
    主内容区域    
    
  • "left">    
  • left
    左侧边栏区域    
    •     
  • "right">    
  • right
    右侧边栏区域    
    •     
    •     
  • "footer">底部    
    •     
  •     
  •    

    • 双飞翼布局

    实现原理
    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. "en-US">    
    3.     
    4. "UTF-8">    
    5. 双飞翼布局    
    6. "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: 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. "header">头部    

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网