CSS左边固定不动宽 右边自融入的完成编码(适配全

2020-10-18 00:07 jianzhan

左边固定不动宽,右边自融入显示屏宽;

上下多列,等高合理布局;

上下多列规定有最少高宽比,比如:200px;(当內容超过200时,会全自动以等高的方法增高)

规定无需JS或CSS个人行为完成;

细心剖析试题规定,要做到实际效果实际上也其实不是太难,只是给人觉得像有点蛋疼的难题1样。可是你细心看后你会感觉并不是那末回事:

左侧固定不动,右侧自融入合理布局,这个第1点应当来讲是是非非常的非常容易,完成的方式也是非常的多,那末便可以说第1条规定已并不是甚么规定了;

上下多列等高合理布局,这1点相对性来讲要繁杂1些,但是你如果掌握了如何完成等高合理布局,那末也是不难。我本人觉得这个考题重要的地方就在考这里,考你怎样完成等高合理布局;因此这1点你必须整搞清楚怎样完成;

至于第3条规定,应当来讲是很层面的,大家到处都可以以看到完成最少高宽比的编码;

第4条这个规定我想是考官想让大家招聘面试的人不可以应用js来完成等高合理布局和最少高宽比的作用。

上面简易的剖析了1下完成全过程,那末最后重要的地方应当是便是“让你的编码要能另外完成两点,其1便是左侧固定不动,右侧自融入的合理布局;其2便是完成多列等高的合理布局”,假如这两个作用进行,那末你也便可以交工作了。那末下面大家就先看来看这两 点是如合完成:

1、多列合理布局:左侧固定不动宽度,右侧自融入宽度

这样的合理布局,实际上并不是难点,我想许多同学都有完成过,那末我就在此略微详细介绍两种常见的方式:

方式1:波动合理布局

这类方式我选用的是左侧波动,右侧再加1个margin-left值,让他完成左侧固定不动,右侧自融入的合理布局实际效果

HTML Markup

CSS Code拷贝內容到剪贴板
  1. <div id="left">Left sidebar</div>   
  2. <div id="content">Main Content</div>   
  3.   
  4. CSS Code   
  5.   
  6. <style type="text/css">   
  7.   
  8. *{   
  9.   
  10. margin: 0;   
  11.   
  12. padding: 0;   
  13.   
  14. }   
  15.     
  16. #left {   
  17.   
  18. floatleft;   
  19.   
  20. width220px;   
  21.   
  22. background-colorgreen;   
  23.   
  24. }   
  25.   
  26. #content {   
  27.   
  28. background-color: orange;   
  29.   
  30. margin-left220px;/*==等于左侧栏宽度==*/  
  31.   
  32. }   
  33. </style>   

上面这类完成方式最重要的地方便是自融入宽度1栏“div#content”的“margin-left”值要等于固定不动宽度1栏的宽度值,大伙儿能够点一下查询上面编码的DEMO

方式2:波动和负边距完成

这个方式选用的是波动和负边距来完成左侧固定不动宽度右侧自融入宽度的合理布局实际效果,大伙儿能够细心比照1下上面那种完成方式,看看二者有甚么差别:

HTML Markup

XML/HTML Code拷贝內容到剪贴板
  1. <div id="left">  
  2. Left Sidebar   
  3. </div>  
  4.   
  5. <div id="content">  
  6.   
  7. <div id="contentInner">  
  8.   
  9. Main Content   
  10.   
  11. </div>  
  12. </div>  

CSS Code

CSS Code拷贝內容到剪贴板
  1. *{   
  2.   
  3. margin: 0;   
  4.   
  5. padding: 0;   
  6.   
  7. }   
  8.   
  9. #left {   
  10.   
  11. background-colorgreen;   
  12.   
  13. floatleft;   
  14.   
  15. width220px;   
  16.   
  17. margin-right: ⑴00%;   
  18.   
  19. }   
  20.   
  21. #content {   
  22.   
  23. floatleft;   
  24.   
  25. width: 100%;   
  26.   
  27. }   
  28.   
  29. #contentInner {   
  30.   
  31. margin-left220px;/*==等于左侧栏宽度值==*/  
  32.   
  33. background-color: orange;   
  34.   
  35. }  

这类方式看上去要略微不便1点,但是也是是非非经常见的1种方式,大伙儿能够看看他的DEMO实际效果。觉得1下,和前面的DEMO有甚么不一样的地方。
 
我 在这里就只展现这两种方式,大伙儿毫无疑问也有其他完成方式,我就不在多说了,由于大家今日要说的并不是这个难题。上面进行了试题的第1种实际效果,那末大伙儿就要想办 法来完成第2条规定——多列等高合理布局。这1点也是本次招聘面试题相当关键的1点,假如你如果不清晰怎样完成等高合理布局的话,我提议您先阅读文章本站的《8种建立等高 列合理布局》,里边详尽详细介绍了8种等高合理布局的方式,并附有有关编码,并且大家后边的应用中也应用了在其中的方式。

如今重要的两点都进行了,那末大家就必须完成第3条规定,完成最少高宽比的设定,这个方式很简易:

CSS Code拷贝內容到剪贴板
  1. min-height200px;   
  2.   
  3. heightauto !important;   
  4.   
  5. height200px;   

上面的编码就轻轻松松的帮大家完成了跨访问器的最少高宽比设定难题。这样1来,大家能够交工作了,也完面了这个招聘面试题的考試。以便让大伙儿更能形象的掌握,我在这里为大伙儿提前准备了5种不一样的完成方式:

方式1:

其他很少说,立即上编码,或参照线上DEMO,下面全部的DEMO都有HTML和CSS编码,感兴趣爱好的同学自身渐渐地看吧。

HTML Markup

XML/HTML Code拷贝內容到剪贴板
  1. <div id="container">  
  2.   
  3. <div id="wrapper">  
  4.   
  5. <div id="sidebar">Left Sidebar</div>  
  6.   
  7. <div id="main">Main Content</div>  
  8.   
  9. </div>  
  10.   
  11. </div>  

CSS Code

CSS Code拷贝內容到剪贴板
  1. <style type="text/css">   
  2.   
  3. * {   
  4.   
  5. margin: 0;   
  6.   
  7. padding: 0;   
  8.   
  9. }   
  10.   
  11. html {   
  12.   
  13. heightauto;   
  14.   
  15. }   
  16.   
  17.     
  18.   
  19. body {   
  20.   
  21. margin: 0;   
  22.   
  23. padding: 0;   
  24.   
  25.     
  26.   
  27. }   
  28.   
  29.     
  30.   
  31. #container {   
  32.   
  33. background#ffe3a6;   
  34.   
  35. }   
  36.   
  37.     
  38.   
  39. #wrapper {   
  40.   
  41. displayinline-block;   
  42.   
  43. border-left200px solid #d4c376;/*==此值等于左侧栏的宽度值==*/  
  44.   
  45. positionrelative;   
  46.   
  47. vertical-alignbottombottom;   
  48.   
  49. }   
  50.   
  51.     
  52.   
  53. #sidebar {   
  54.   
  55. floatleft;   
  56.   
  57. width200px;   
  58.   
  59. margin-left: -200px;/*==此值等于左侧栏的宽度值==*/  
  60.   
  61. positionrelative;   
  62.   
  63. }   
  64.   
  65.     
  66.   
  67. #main {   
  68.   
  69. floatleft;   
  70.   
  71. }   
  72.   
  73.     
  74.   
  75. #maing,   
  76.   
  77. #sidebar{   
  78.   
  79. min-height200px;   
  80.   
  81. heightauto !important;   
  82.   
  83. height200px;   
  84.   
  85. }   
  86.   
  87. </style>  

方式2

HTML Markup

XML/HTML Code拷贝內容到剪贴板
  1. <div id="container">  
  2.   
  3. <div id="left" class="aside">Left Sidebar</div>  
  4.   
  5. <div id="content" class="section">Main Content</div>  
  6.   
  7. </div>  

CSS Code

CSS Code拷贝內容到剪贴板
  1. <style type="text/css">   
  2.   
  3. *{margin: 0;padding: 0;}   
  4.   
  5. #container {   
  6.   
  7. overflowhidden;   
  8.   
  9. }   
  10.   
  11.     
  12.   
  13. #left {   
  14.   
  15. background#ccc;   
  16.   
  17. floatleft;   
  18.   
  19. width200px;   
  20.   
  21. margin-bottom: -99999px;   
  22.   
  23. padding-bottom99999px;   
  24.   
  25.     
  26.   
  27. }   
  28.   
  29.     
  30.   
  31. #content {   
  32.   
  33. background#eee;   
  34.   
  35. margin-left200px;/*==此值等于左侧栏的宽度值==*/  
  36.   
  37. margin-bottom: -99999px;   
  38.   
  39. padding-bottom99999px;   
  40.   
  41. }   
  42.   
  43. #left,   
  44.   
  45. #content {   
  46.   
  47. min-height200px;   
  48.   
  49. heightauto !important;   
  50.   
  51. height200px;   
  52.   
  53. }   
  54.   
  55. </style>  

方式3:

HTML Markup

XML/HTML Code拷贝內容到剪贴板
  1. <div id="container">  
  2.   
  3. <div id="content">Main Content</div>  
  4.   
  5. <div id="sidebar">Left Sidebar</div>  
  6.   
  7. </div>  

CSS Code

CSS Code拷贝內容到剪贴板
  1. *{margin: 0;padding: 0;}   
  2.   
  3. #container{   
  4.   
  5. background-color:#0ff;   
  6.   
  7. overflow:hidden;   
  8.   
  9. padding-left:220px/* 宽度尺寸等与边栏宽度尺寸*/  
  10.   
  11. }   
  12.   
  13. * html #container{   
  14.   
  15. height:1%; /* So IE plays nice */  
  16.   
  17. }   
  18.   
  19. #content{   
  20.   
  21. background-color:#0ff;   
  22.   
  23. width:100%;   
  24.   
  25. border-left:220px solid #f00;/* 宽度尺寸等与边栏宽度尺寸*/  
  26.   
  27. margin-left:-220px;/* 宽度尺寸等与边栏宽度尺寸*/  
  28.   
  29. float:rightright;   
  30.   
  31. }   
  32.   
  33. #sidebar{   
  34.   
  35. background-color:#f00;   
  36.   
  37. width:220px;   
  38.   
  39. float:rightright;   
  40.   
  41. margin-left:-220px;/* 宽度尺寸等与边栏宽度尺寸*/  
  42.   
  43. }   
  44.   
  45. #content,   
  46.   
  47. #sidebar {   
  48.   
  49. min-height200px;   
  50.   
  51. heightauto !important;   
  52.   
  53. height200px;   
  54.   
  55. }  

方式4:

HTML Markup

XML/HTML Code拷贝內容到剪贴板
  1. <div id="container2">  
  2.   
  3. <div id="container1">  
  4.   
  5. <div id="col1">Left Sidebar</div>  
  6.   
  7. <div id="col2">Main Content</div>  
  8.   
  9. </div>  
  10.   
  11. </div>  

CSS Code

CSS Code拷贝內容到剪贴板
  1. *{padding: 0;margin:0;}   
  2.   
  3. #container2 {   
  4.   
  5.  floatleft;   
  6.   
  7.  width: 100%;   
  8.   
  9.  background: orange;   
  10.   
  11.  positionrelative;   
  12.   
  13.  overflowhidden;   
  14.   
  15.  }   
  16.   
  17.  #container1 {   
  18.   
  19.  floatleft;   
  20.   
  21.  width: 100%;   
  22.   
  23.  backgroundgreen;   
  24.   
  25.  positionrelative;   
  26.   
  27.  left220px;/* 宽度尺寸等与边栏宽度尺寸*/  
  28.   
  29.  }   
  30.   
  31.         
  32.   
  33.  #col2 {   
  34.   
  35.  positionrelative;   
  36.   
  37.  margin-right220px;/* 宽度尺寸等与边栏宽度尺寸*/  
  38.   
  39.  }   
  40.   
  41.         
  42.   
  43.  #col1 {   
  44.   
  45.  width220px;   
  46.   
  47.  floatleft;   
  48.   
  49.  positionrelative;   
  50.   
  51.  margin-left: -220px;/* 宽度尺寸等与边栏宽度尺寸*/  
  52.   
  53.  }   
  54.   
  55.      
  56.   
  57. #col1,#col2 {   
  58.   
  59. min-height200px;   
  60.   
  61. heightauto !important;   
  62.   
  63. height200px;   
  64.   
  65. }  

方式5:

HTML Markup

XML/HTML Code拷贝內容到剪贴板
  1. <div id="container1">  
  2.   
  3. <div id="container">  
  4.   
  5. <div id="left">Left Sidebar</div>  
  6.   
  7. <div id="content">  
  8.   
  9. <div id="contentInner">Main Content</div>  
  10.   
  11. </div>  
  12.   
  13. </div>  
  14.   
  15. </div>  

CSS Code
CSS Code拷贝內容到剪贴板
  1. *{padding: 0;margin: 0;}   
  2.   
  3. #container1 {   
  4.   
  5. floatleft;   
  6.   
  7. width: 100%;   
  8.   
  9. overflowhidden;   
  10.   
  11. positionrelative;   
  12.   
  13. background-color#dbddbb;   
  14.   
  15. }   
  16.   
  17. #container {   
  18.   
  19. background-color: orange;   
  20.   
  21. width: 100%;   
  22.   
  23. floatleft;   
  24.   
  25. positionrelative;   
  26.   
  27. left220px;/* 宽度尺寸等与边栏宽度尺寸*/  
  28.   
  29. }   
  30.   
  31. #left {   
  32.   
  33. floatleft;   
  34.   
  35. margin-right: ⑴00%;   
  36.   
  37. margin-left: -220px;/* 宽度尺寸等与边栏宽度尺寸*/  
  38.   
  39. width220px;   
  40.   
  41. }   
  42.   
  43. #content {   
  44.   
  45. floatleft;   
  46.   
  47. width: 100%;   
  48.   
  49. margin-left: -220px;/* 宽度尺寸等与边栏宽度尺寸*/  
  50.   
  51. }   
  52.   
  53. #contentInner {   
  54.   
  55. margin-left220px;/* 宽度尺寸等与边栏宽度尺寸*/  
  56.   
  57. overflowhidden;   
  58.   
  59. }   
  60.   
  61. #left,   
  62.   
  63. #content {   
  64.   
  65. min-height200px;   
  66.   
  67. heightauto !important;   
  68.   
  69. height200px;   
  70.   
  71. }  

对于上面的招聘面试题规定,我1共应用了5种不一样的方式来完成,历经检测都能在各访问器中运作,最终我有几点必须非常提出:

上面全部DEMO中,要留意其方位性的相互配合,而且值要统1,假如您想尝试应用自身合理布局必须的宽度值,请对比有关编码阶段开展改动;

上面全部DEMO中,沒有设定她们之间的间隔,假如您想让她们之间有1定的间隔,有两种方式将会完成,其1在上面的DEMO基本上改动有关主要参数,其2,在相应的里边再加"div"标识,并设定其“padding”值,这样更安全性,不至于摆脱你的合理布局

由于大家这里有1列应用了自融入宽度,在一部分访问器下,当访问器显示屏拉至到1定的尺寸时,给大家带来的觉得是自融入宽度那栏內容好像被掩藏,在你的具体新项目中最好是能在“body”中再加1个“min-width”的设定。

以上这篇CSS左边固定不动宽 右边自融入的完成编码(适配全部访问器)便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。