首页 > 开发 > CSS > 正文

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

2024-07-11 08:33:15
字体:
来源:转载
供稿:网友

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

实现原理
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. <!DOCTYPE HTML>     <html lang="en-US">    
  2. <head>     <meta charset="UTF-8">    
  3. <title>圣杯布局</title>     <style type="text/css">    
  4. body {     text-align: center;;    
  5. }    #demo {    
  6. margin: auto;     }   
  7. #header, #footer {     height: 50px;    
  8. background-color: #aaa;     }   
  9. #container {     overflow: hidden;    
  10. margin: 10px 0;     padding:0 210px;    
  11. }    #left {    
  12. background-color: red;     float:left;    
  13. position:relative;     left:-210px;    
  14. width:200px;     margin-left:-100%;    
  15. }    #right {    
  16. background-color: green;     width: 200px;    
  17. margin-left: -200px;     float: left;    
  18. right: -210px;     position: relative;    
  19. }    #middle {    
  20. background-color: blue;     float:left;    
  21. width:100%;     }    
  22. </style>     </head>    
  23. <body>     <div id="demo">    
  24. <header id="header">头部</header>     <div id="container">    
  25. <div id="middle">     middle<br>主内容区域    
  26. </div>     <div id="left">    
  27. left<br>左侧边栏区域     </div>    
  28. <div id="right">     right<br>右侧边栏区域    
  29. </div>     </div>    
  30. <footer id="footer">底部</footer>     </div>    
  31. </body>     </html>   
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表