巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
建站专提News

CSS的三列式"圣杯规划"打算完整剖析

一佰互联网站开辟设想(www.taishanly.com) 宣布日期 2020-04-21 17:23:37 阅读数: 126

圣杯规划源自 Matthew Levine 在06年的一篇文章,其DOM规划以下:

XML/HTML Code复制内容到剪贴板
  1. <div class="container">  
  2.     <div class="main"></div>  
  3.  <div class="sub"></div>  
  4.  <div class="extra"></div>  
  5. </div>  

流程讲解
接上去,让咱们一步一阵势完成圣杯规划;

1、 起首别离浮动main、sub、extra三列, 而后操纵负外边距把sub列和extra列定位到摆布双方。这时辰的CSS代码以下:

CSS Code复制内容到剪贴板
  1. .main {   
  2.  floatleft;   
  3.  width: 100%;   
  4.  height300px;   
  5.  background-color: rgba(255, 0, 0, .5);   
  6. }   
  7. .sub {   
  8.  floatleft;   
  9.  width200px;   
  10.  height300px;   
  11.  margin-left: -100%;   
  12.  background-color: rgba(0, 255, 0, .5);   
  13. }   
  14. .extra {   
  15.  floatleft;   
  16.  width180px;   
  17.  height300px;   
  18.  margin-left: -180px;   
  19.  background-color: rgba(0, 0, 255, .5);   
  20. }  

2、 完成上步后,sub和extra列已到了准确的地位,可是sub和extra列却笼盖了main的双方,对这个题目,圣杯规划的处理体例是给容器container增加左、右内边距,从而让main列定位到准确的地位。

CSS Code复制内容到剪贴板
  1. .container {   
  2.  padding-left210px;   
  3.  padding-right190px;   
  4. }  

3、 完成第二步后又呈现了新题目:sub、extra列也遭到容器摆布内边距的影响地位产生了挪动。为了处理这个题目,圣杯规划利用绝对定位使sub、extra列回到准确的地位。新增加代码以下:

CSS Code复制内容到剪贴板
  1. .sub {   
  2.  positionrelative;   
  3.  left: -210px;   
  4. }   
  5. .extra {   
  6.  positionrelative;   
  7.  rightright: -190px;   
  8. }  

4、 当阅读器减少到必然水平时,这个规划能够会被粉碎,能够在body上增加min-width属性处理。终究的圣杯规划CSS代码以下:

CSS Code复制内容到剪贴板
  1. body {   
  2.  min-width600px/* 2*sub + extra */  
  3. }   
  4. .container {   
  5.  padding-left210px;   
  6.  padding-right190px;   
  7. }   
  8. .main {   
  9.  floatleft;   
  10.  width: 100%;   
  11.  height300px;   
  12.  background-color: rgba(255, 0, 0, .5);   
  13. }   
  14. .sub {   
  15.  positionrelative;   
  16.  left: -210px;   
  17.  floatleft;   
  18.  width200px;   
  19.  height300px;   
  20.  margin-left: -100%;   
  21.  background-color: rgba(0, 255, 0, .5);   
  22. }   
  23. .extra {   
  24.  positionrelative;   
  25.  rightright: -190px;   
  26.  floatleft;   
  27.  width180px;   
  28.  height300px;   
  29.  margin-left: -180px;   
  30.  background-color: rgba(0, 0, 255, .5);   
  31. }  

点击检查在线demo

完整实例
结果以下:

CSS 和 DOM 代码以下:

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4.     <meta charset="utf-8">   
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">   
  6.     <title>圣杯规划</title>   
  7.   
  8.     <style type="text/css">   
  9.     body {background-color#fffffffont-size:14px;}   
  10.     #hd, #ft {padding:20px 3pxbackground-color#cccccctext-aligncenter;}   
  11.     .bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {margin:10px 0; min-width:400px;}   
  12.     .main {background-color#03a9f4color:#ffffff;}   
  13.     .aside, .aside-1, .aside-2 {background-color#00bcd4color:#ffffff;}   
  14.     p {margin:0; padding:20pxtext-aligncenter;}   
  15.        
  16.        
  17.     /* 左边栏牢固宽度,右侧自顺应 */  
  18.     .bd-lft {   
  19.         zoom:1;   
  20.         overflow:hidden;   
  21.         padding-left:210px;   
  22.     }   
  23.     .bd-lft .aside {   
  24.         float:left;   
  25.         width:200px;   
  26.         margin-left:-100%; /*= -100%*/  
  27.   
  28.         position:relative;   
  29.         left:-210px/* = -parantNode.paddingLeft */  
  30.         _left: 0; /*IE6 hack*/  
  31.     }   
  32.     .bd-lft .main {   
  33.         float:left;   
  34.         width:100%;   
  35.     }   
  36.   
  37.   
  38.     /* 右侧栏牢固宽度,左边自顺应 */  
  39.     .bd-rgt {   
  40.         zoom:1;   
  41.         overflow:hidden;   
  42.         padding-right:210px;   
  43.     }   
  44.     .bd-rgt .aside {   
  45.         float:left;   
  46.         width:200px;   
  47.         margin-left:-200px/* = -this.width */  
  48.   
  49.         position:relative;   
  50.         rightright:-210px/* = -parantNode.paddingRight */  
  51.     }   
  52.     .bd-rgt .main {   
  53.         float:left;   
  54.         width:100%;   
  55.     }   
  56.   
  57.   
  58.     /* 左中右 三栏自顺应 */  
  59.     .bd-3-lr {   
  60.         zoom:1;   
  61.         overflow:hidden;   
  62.         padding-left:210px;   
  63.         padding-right:210px;   
  64.     }   
  65.     .bd-3-lr .main {   
  66.         float:left;   
  67.         width:100%;   
  68.     }   
  69.     .bd-3-lr .aside-1 {   
  70.         floatleft;   
  71.         width:200px;   
  72.         margin-left: -100%;   
  73.   
  74.         position:relative;   
  75.         left: -210px;   
  76.         _left: 210px/*IE6 hack*/  
  77.     }   
  78.     .bd-3-lr .aside-2 {   
  79.         floatleft;   
  80.         width:200px;   
  81.         margin-left: -200px;   
  82.   
  83.         position:relative;   
  84.         rightright: -210px;   
  85.     }   
  86.   
  87.     /* 都在左边,右侧自顺应 */  
  88.     .bd-3-ll {   
  89.         zoom:1;   
  90.         overflow:hidden;   
  91.         padding-left:420px;   
  92.     }   
  93.     .bd-3-ll .main {   
  94.         float:left;   
  95.         width:100%;   
  96.     }   
  97.     .bd-3-ll .aside-1 {   
  98.         floatleft;   
  99.         width:200px;   
  100.         margin-left: -100%;   
  101.   
  102.         position:relative;   
  103.         left: -420px;   
  104.         _left: 0px/*IE6 hack*/  
  105.     }   
  106.     .bd-3-ll .aside-2 {   
  107.         floatleft;   
  108.         width:200px;   
  109.         margin-left: -100%;   
  110.   
  111.         position:relative;   
  112.         left: -210px;   
  113.         _left: 210px/*IE6 hack*/  
  114.     }   
  115.   
  116.     /* 都在右侧,左边自顺应 */  
  117.     .bd-3-rr {   
  118.         zoom:1;   
  119.         overflow:hidden;   
  120.         padding-right:420px;   
  121.     }   
  122.     .bd-3-rr .main {   
  123.         float:left;   
  124.         width:100%;   
  125.     }   
  126.     .bd-3-rr .aside-1 {   
  127.         floatleft;   
  128.         width:200px;   
  129.         margin-left: -200px;   
  130.   
  131.         position:relative;   
  132.         rightright: -210px;   
  133.     }   
  134.     .bd-3-rr .aside-2 {   
  135.         floatleft;   
  136.         width:200px;   
  137.         margin-left: -200px;   
  138.   
  139.         position:relative;   
  140.         rightright: -420px;   
  141.     }   
  142.   
  143.   
  144.     </style>   
  145.   
  146. </head>   
  147. <body>   
  148.   
  149.     <div id="hd">头部</div>   
  150.        
  151.     <div class="bd-lft">   
  152.         <div class="main">   
  153.             <p>主内容栏自顺应宽度</p>   
  154.         </div>   
  155.   
  156.         <div class="aside">   
  157.             <p>侧边栏牢固宽度</p>   
  158.         </div>   
  159.     </div>   
  160.   
  161.     <div class="bd-rgt">   
  162.         <div class="main">   
  163.             <p>主内容栏自顺应宽度</p>   
  164.         </div>   
  165.   
  166.         <div class="aside">   
  167.             <p>侧边栏牢固宽度</p>   
  168.         </div>   
  169.     </div>   
  170.   
  171.     <div class="bd-3-lr">   
  172.         <div class="main">   
  173.             <p>主内容栏自顺应宽度</p>   
  174.         </div>   
  175.   
  176.         <div class="aside-1">   
  177.             <p>侧边栏1牢固宽度</p>   
  178.         </div>   
  179.   
  180.         <div class="aside-2">   
  181.             <p>侧边栏2牢固宽度</p>   
  182.         </div>   
  183.     </div>   
  184.   
  185.     <div class="bd-3-ll">   
  186.         <div class="main">   
  187.             <p>主内容栏自顺应宽度</p>   
  188.         </div>   
  189.   
  190.         <div class="aside-1">   
  191.             <p>侧边栏1牢固宽度</p>   
  192.         </div>   
  193.   
  194.         <div class="aside-2">   
  195.             <p>侧边栏2牢固宽度</p>   
  196.         </div>   
  197.     </div>   
  198.   
  199.     <div class="bd-3-rr">   
  200.         <div class="main">   
  201.             <p>主内容栏自顺应宽度</p>   
  202.         </div>   
  203.   
  204.         <div class="aside-1">   
  205.             <p>侧边栏1牢固宽度</p>   
  206.         </div>   
  207.   
  208.         <div class="aside-2">   
  209.             <p>侧边栏2牢固宽度</p>   
  210.         </div>   
  211.     </div>   
  212.        
  213.     <div id="ft">底部</div>   
  214.   
  215. </body>   
  216. </html>  

圣杯规划的长处总结以下:
1.使首要内容列先加载。
2.许可任何列是最高的。
3.不额定的div。
4.须要的hack很少。

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。更多资讯:tags标签

相干消息more

28
03月
若是你是微信小法式开辟者,出去看下吧

简介:今天写文章分享了下我这2个多月的微信小法式开辟心得,看到有人留言,有人私信。有但愿协作的,有但愿帮他开辟产物的,发明大师实在对小法式都... >>概况

09
04月
一样是描边字,为甚么你做的老是很土头土脑? -

@研习设K师长教师 :本篇文章里,咱们会学到各类与描边相干的表现情势和操纵技能。豪斯师长教师立体讲堂系列:《妙手的立体讲堂!多张图片在版面里的编排方... >>概况

27
04月
Symfony完成行动和模板中获得reque

本文实例报告了Symfony完成行动和模板中获得request参数的体例。分享给大师供大师参考,详细以下:一.模板中获得参数<?... >>概况

09
04月
腾讯干货!假造To B付出设想研讨之设想思虑

本篇研讨体例——对比法,是社会科学中应用较广的体例。对比法旨在将有必然接洽关系的景象和观点,停止比拟对比,判定异同、阐发启事。对认知目生范畴,... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站