当前位置:Gxlcms > html代码 > DIV+CSS网页布局之:两列布局-彼岸时光

DIV+CSS网页布局之:两列布局-彼岸时光

时间:2021-07-01 10:21:17 帮助过:35人阅读

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>

人气教程排行