首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网页制作 / CSS 阅读数： 1892
收藏 0 赞 0 分享

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

1、宽度自适应两列布局

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

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

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="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. <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、固定宽度两列布局

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

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="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: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-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: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、固定宽度横向两列布局

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  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

更多精彩内容其他人还在看

2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼

这篇文章主要介绍了2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼,需要的朋友可以参考下
收藏 0 赞 0 分享

前端设计师需要了解的9个问题

这篇文章主要介绍了前端设计师需要了解的9个问题以及注意事项，非常的实用，是篇非常不错的文章，这里推荐给大家
收藏 0 赞 0 分享

CSS强制性换行的方法区别详解

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
收藏 0 赞 0 分享

CSS语义化命名方式及常用命名规则

本文搜集了一些CSS语义化命名方式以及命名规则。如有错误或不妥之处，敬请指出，欢迎你提出更好的建议，加插更多的命名规范。
收藏 0 赞 0 分享

ul li内容宽度的问题的解决方案

在IE6下只要我设置LI的宽度为auto，不论LI里面的内容多长，LI的宽度始终是100%，即UL的宽度(这里我已经写死了UL的宽度)。设置max-width也没用。高手们，在IE系列浏览器中如何使LI的宽度真正的随着内容增长而增长呢？像FF那样。
收藏 0 赞 0 分享

html5+css3气泡组件的实现

本文是html5+css3系列教程的第一篇，给大家讲述html5+css3实现气泡组件，讲解的十分的详细，这里推荐给大家，希望对大家能有所帮助
收藏 0 赞 0 分享

html5+css3之CSS中的布局与Header的实现

本文从CSS3的布局（CSS的布局的演化、CSS3盒模型-box-sizing、float布局中的bfc、Flexbox简介）Header布局的实现（float实现布局、Header js的实现）向我们展示了HTML5与CSS3的魅力。
收藏 0 赞 0 分享

一款恶搞头像特效的制作过程 利用css3和jquery

今天给大家介绍一款恶搞头像特效的制作过程，你可以把任意一张照片放到跳舞的漫画中，为他带上不同的帽子，让他翩翩起舞，下面我们一起来看一下制作过程和效果
收藏 0 赞 0 分享

大图片根据分辨率自适应宽度仍居中显示

一个1920*900的大图，在1024*768的分辨率下仍居中显示，如何做到这一点，下面是一个可行的解决方案
收藏 0 赞 0 分享

CSS3提交意见输入框样式代码

这个提交意见输入框，结构使用到了table，样式用的css3，包含了多方面的知识，比较适合新手朋友们
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22