DIV+CSS 网页布局之：两列布局

时间 2019-12-10

标签 div+css div css 网页布局栏目 HTML 繁體版

原文原文链接

一、宽度自适应两列布局

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

　　当元素使用了浮动以后，会对周围的元素形成影响，那么就须要清除浮动，一般使用两种方法。能够给受到影响的元素设置 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>

二、固定宽度两列布局

　　宽度自适应两列布局在网站中通常不多使用，最常使用的是固定宽度的两列布局。网站

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

 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>

三、两列居中自适应布局

　　同理，只须要给定父容器的宽度，而后让父容器水平居中。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>

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

　　和单列布局相同，能够把全部块包含在一个容器中，这样作方便设置，但增长了无心义的代码，固定宽度就是给定父容器的宽度，而后中间主体使用浮动。htm

 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>