国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > 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>   

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板： 闵行区| 广德县| 荔浦县| 楚雄市| 中江县| 遂溪县| 莲花县| 翁牛特旗| 福泉市| 庐江县| 咸阳市| 水富县| 图木舒克市| 金塔县| 沈丘县| 建水县| 鄂州市| 大安市| 睢宁县| 盘锦市| 仁布县| 三亚市| 遂昌县| 察雅县| 阿城市| 石门县| 开原市| 桐柏县| 正定县| 仲巴县| 金堂县| 深泽县| 和平县| 汝南县| 积石山| 双桥区| 黄平县| 阜阳市| 淳安县| 尖扎县| 凤城市|