学习培训DIV+CSS网页页面合理布局之多列合理布局

日期：2021-03-04 类型：科技新闻 

关键词：微信公众号平台小程序，微信打分小程序，小程序发布，小程序大全，微信小程序编程

DIV+CSS 网页页面合理布局第2篇：多列合理布局

1、宽度自融入多列合理布局

　　多列合理布局可使用波动来进行，左列设定左波动，右列设定右波动，这样就省的再设定外边距了。

　　当元素应用了波动以后，会对周边的元素导致危害，那末就必须消除波动，一般应用两种方式。能够给遭受危害的元素设定 clear:both，即消除元素两边的波动，还可以设定实际消除哪1侧的波动：clear:left 或 clear:right，但务必清晰的了解究竟是哪1侧必须消除波动的危害。还可以给波动的父器皿设定宽度，或为 100%，另外设定 overflow:hidden，外溢掩藏还可以做到消除波动的实际效果。

　　同理，多列宽度自融入，只必须将宽度依照百分比来设定，这样当访问器对话框调剂时，內容会依据对话框的尺寸，依照百分比来全自动调整內容的尺寸。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>宽度自融入多列合理布局</title>  
  6. <style>  
  7. *{margin:0;padding:0;}   
  8. #herder{   
  9.     height:50px;   
  10.     background:blue;   
  11. }   
  12. .main-left{   
  13.     width:30%;   
  14.     height:800px;   
  15.     background:red;   
  16.     float:left;   
  17. }   
  18. .main-right{   
  19.     width:70%;   
  20.     height:800px;   
  21.     background:pink;   
  22.     float:right;   
  23. }   
  24. #footer{   
  25.     clear:both;   
  26.     height:50px;   
  27.     background:gray;   
  28. }   
  29. </style>  
  30. </head>  
  31. <body>  
  32. <div id="herder">页头</div>  
  33. <div class="main-left">左列</div>  
  34. <div class="main-right">右列</div>  
  35. <div id="footer">页脚</div>  
  36. </body>  
  37. </html>  

2、固定不动宽度多列合理布局

　　宽度自融入多列合理布局在网站中1般非常少应用，最常应用的是固定不动宽度的多列合理布局。

　　要完成固定不动宽度的多列合理布局，也很简易，只必须把上下多列包裹起来，也便是给她们提升1个父器皿，随后固定不动父器皿的宽度，父器皿的宽度固定不动了，那末这多列便可以设定实际的像素宽度了，这样就完成了固定不动宽度的多列合理布局。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>固定不动宽度多列合理布局</title>  
  6. <style>  
  7. *{margin:0;padding:0;}   
  8. #herder{   
  9.     height:50px;   
  10.     background:blue;   
  11. }   
  12. #main{   
  13.     width:960px;   
  14.     margin:0 auto;   
  15.     overflow:hidden;   
  16. }   
  17. #main .main-left{   
  18.     width:288px;   
  19.     height:800px;   
  20.     background:red;   
  21.     float:left;   
  22. }   
  23. #main .main-right{   
  24.     width:672px;   
  25.     height:800px;   
  26.     background:pink;   
  27.     float:right;   
  28. }   
  29. #footer{   
  30.     width:960px;   
  31.     height:50px;   
  32.     background:gray;   
  33.     margin:0 auto;   
  34. }   
  35. </style>  
  36. </head>  
  37. <body>  
  38. <div id="herder">页头</div>  
  39. <div id="main">  
  40.     <div class="main-left">左列</div>  
  41.     <div class="main-right">右列</div>  
  42. </div>  
  43. <div id="footer">页脚</div>  
  44. </body>  
  45. </html>  

3、多列垂直居中自融入合理布局

　　同理，只必须给定父器皿的宽度，随后让父器皿水平垂直居中。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>多列垂直居中自融入合理布局</title>  
  6. <style>  
  7. *{margin:0;padding:0;}   
  8. #herder{   
  9.     height:50px;   
  10.     background:blue;   
  11. }   
  12. #main{   
  13.     width:80%;   
  14.     margin:0 auto;   
  15.     overflow:hidden;   
  16. }   
  17. #main .main-left{   
  18.     width:20%;   
  19.     height:800px;   
  20.     background:red;   
  21.     float:left;   
  22. }   
  23. #main .main-right{   
  24.     width:80%;   
  25.     height:800px;   
  26.     background:pink;   
  27.     float:right;   
  28. }   
  29. #footer{   
  30.     width:80%;   
  31.     height:50px;   
  32.     background:gray;   
  33.     margin:0 auto;   
  34. }   
  35. </style>  
  36. </head>  
  37. <body>  
  38. <div id="herder">页头</div>  
  39. <div id="main">  
  40.     <div class="main-left">左列</div>  
  41.     <div class="main-right">右列</div>  
  42. </div>  
  43. <div id="footer">页脚</div>  
  44. </body>  
  45. </html>  

4、固定不动宽度横向多列合理布局

　　和单列合理布局同样，能够把全部块包括在1个器皿中，这样做便捷设定，但提升了不经意义的编码，固定不动宽度便是给定父器皿的宽度，随后正中间行为主体应用波动。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>横向多列合理布局</title>  
  6. <style>  
  7. *{margin:0;padding:0;}   
  8. #warp{   
  9.     width:960px;   
  10.     margin:0 auto;   
  11.     margin-top:10px;   
  12. }   
  13. #herder{   
  14.     height:50px;   
  15.     background:blue;   
  16. }   
  17. #nav{   
  18.     height:30px;   
  19.     background:orange;   
  20.     margin:10px 0;   
  21. }   
  22. #main{   
  23.     width:100%;   
  24.     margin-bottom:10px;   
  25.     overflow:hidden;   
  26. }   
  27. #main .main-left{   
  28.     width:640px;   
  29.     height:200px;   
  30.     background:yellow;   
  31.     float:left;   
  32. }   
  33. #main .main-right{   
  34.     width:300px;   
  35.     height:200px;   
  36.     background:pink;   
  37.     float:right;   
  38. }   
  39. #content{   
  40.     width:100%;   
  41.     overflow:hidden;   
  42. }   
  43. #content .content-left{   
  44.     width:640px;   
  45.     height:800px;   
  46.     background:lightgreen;   
  47.     float:left;   
  48. }   
  49. #content .content-right-sup{   
  50.     width:300px;   
  51.     height:500px;   
  52.     background:lightblue;   
  53.     float:right;   
  54. }   
  55. #content .content-right-sub{   
  56.     width:300px;   
  57.     height:240px;   
  58.     background:purple;   
  59.     margin-top:20px;   
  60.     float:right;   
  61. }   
  62. #footer{   
  63.     height:50px;   
  64.     background:gray;   
  65.     margin-top:10px;   
  66. }   
  67. </style>  
  68. </head>  
  69. <body>  
  70. <div id="warp">  
  71.     <div id="herder">页头</div>  
  72.     <div id="nav">导航栏</div>  
  73.     <div id="main">  
  74.         <div class="main-left">左-上</div>  
  75.         <div class="main-right">右-上</div>  
  76.     </div>  
  77.     <div id="content">  
  78.         <div class="content-left">左-下</div>  
  79.         <div class="content-right-sup">右-上</div>  
  80.         <div class="content-right-sub">右-下</div>  
  81.     </div>  
  82.     <div id="footer">页脚</div>  
  83. </div>  
  84. </body>  
  85. </html>  

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助。

原文：http://www.cnblogs.com/Mtime/p/5272414.html

上一篇：css绘图全透明3角形 返回下一篇：没有了