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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。