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>