学习DIV+CSS网页布局之两列布局

互联网
初秋的风似一支七彩的画笔，走到哪里，哪里就披上秋的盛装，五光十色的鲜花和着七彩的蝴蝶，迎着丰收的景象。五彩缤纷的鲜花撒满大地，丰收的果园一派欣欣向荣的景象，金黄色的稻谷堆满仓，大地一片喜气洋洋。

DIV+CSS 网页布局第二篇：两列布局

1、宽度自适应两列布局

　　两列布局可以使用浮动来完成，左列设置左浮动，右列设置右浮动，这样就省的再设置外边距了。

　　当元素使用了浮动之后，会对周围的元素造成影响，那么就需要清除浮动，通常使用两种方法。可以给受到影响的元素设置 clear:both，即清除元素两侧的浮动，也可以设置具体清除哪一侧的浮动：clear:left 或 clear:right，但必须清楚的知道到底是哪一侧需要清除浮动的影响。也可以给浮动的父容器设置宽度，或者为 100%，同时设置 overflow:hidden，溢出隐藏也可以达到清除浮动的效果。

　　同理，两列宽度自适应，只需要将宽度按照百分比来设置，这样当浏览器窗口调整时，内容会根据窗口的大小，按照百分比来自动调节内容的大小。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  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. <divid="herder">页头</div>
  33. <divclass="main-left">左列</div>
  34. <divclass="main-right">右列</div>
  35. <divid="footer">页脚</div>
  36. </body>
  37. </html>

2、固定宽度两列布局

　　宽度自适应两列布局在网站中一般很少使用，最常使用的是固定宽度的两列布局。

　　要实现固定宽度的两列布局，也很简单，只需要把左右两列包裹起来，也就是给他们增加一个父容器，然后固定父容器的宽度，父容器的宽度固定了，那么这两列就可以设置具体的像素宽度了，这样就实现了固定宽度的两列布局。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  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:0auto;
  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:0auto;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <divid="herder">页头</div>
  39. <divid="main">
  40. <divclass="main-left">左列</div>
  41. <divclass="main-right">右列</div>
  42. </div>
  43. <divid="footer">页脚</div>
  44. </body>
  45. </html>

3、两列居中自适应布局

　　同理，只需要给定父容器的宽度，然后让父容器水平居中。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  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:0auto;
  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:0auto;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <divid="herder">页头</div>
  39. <divid="main">
  40. <divclass="main-left">左列</div>
  41. <divclass="main-right">右列</div>
  42. </div>
  43. <divid="footer">页脚</div>
  44. </body>
  45. </html>

4、固定宽度横向两列布局

　　和单列布局相同，可以把所有块包含在一个容器中，这样做方便设置，但增加了无意义的代码，固定宽度就是给定父容器的宽度，然后中间主体使用浮动。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>横向两列布局</title>
  6. <style>
  7. *{margin:0;padding:0;}
  8. #warp{
  9. width:960px;
  10. margin:0auto;
  11. margin-top:10px;
  12. }
  13. #herder{
  14. height:50px;
  15. background:blue;
  16. }
  17. #nav{
  18. height:30px;
  19. background:orange;
  20. margin:10px0;
  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. <divid="warp">
  71. <divid="herder">页头</div>
  72. <divid="nav">导航</div>
  73. <divid="main">
  74. <divclass="main-left">左-上</div>
  75. <divclass="main-right">右-上</div>
  76. </div>
  77. <divid="content">
  78. <divclass="content-left">左-下</div>
  79. <divclass="content-right-sup">右-上</div>
  80. <divclass="content-right-sub">右-下</div>
  81. </div>
  82. <divid="footer">页脚</div>
  83. </div>
  84. </body>
  85. </html>

以上就是本文的全部内容，希望对大家的学习有所帮助。

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

您可能有感兴趣的文章
CSS让子元素div的高度填满父容器的剩余空间的方法
DIV或者DIV里面的图片水平与垂直居中的方法
详解CSS3原生支持div铺满浏览器的方法
div+css样式自制带小三角的tooltips效果
DIV 自动滚动功能及滚动条颜色修改的代码