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

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

1、宽度自适应两列布局

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

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

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

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、固定宽度两列布局

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

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

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、两列居中自适应布局

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

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、固定宽度横向两列布局

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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！