1000元配置

2000元配置

3000元配置

4000元配置

5000元配置

6000元配置

7000元配置

8000元配置

9000元配置

万元配置

i3配置

 i5配置

i7配置

APU配置

R5配置

R7配置

游戏攻略

软件教程

Win10教程

Win7教程

Mac教程

Linux教程

U盘教程

Server教程

首页 > 网页制作 > CSS

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

admin CSS 2022-02-06 16:28:15 DIV+CSS   布局   两列布局"

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

1、宽度自适应两列布局

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

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

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

XML/HTML Code复制内容到剪贴板
  1. >  
  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. >  
  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. >  
  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. >  
  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

版权声明

本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
本文地址：/web/CSS/78196.html

上一篇 : 让DIV水平垂直居中的两种完美方法推荐
下一篇 : 浅谈各种浏览器下的CSS Hack兼容性写法

相关文章

留言与评论（共有 0 条评论）
   
验证码：

热门文章

最近发表

标签列表

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

桂ICP备2023010378号-4

桂公网备 45012202000125号

联系我们

商业合作

广告投放

投稿须知

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持