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

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

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

1、宽度自适应三列布局

  三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局。

  同样的道理,更多列的布局,其实和两列、三列的布局模式是一样的。

 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:100%;
14     overflow:hidden;
15 }
16 #main .main-left{
17     width:25%;
18     height:800px;
19     background:red;
20     float:left;
21 }
22 #main .main-center{
23     width:50%;
24     height:800px;
25     background:lightgreen;
26     float:left;
27 }
28 #main .main-right{
29     width:25%;
30     height:800px;
31     background:pink;
32     float:right;
33 }
34 #footer{
35     height:50px;
36     background:gray;
37 }
38 style>
39 head>
40 <body>
41 <div id="herder">页头div>
42 <div id="main">
43     <div class="main-left">左列div>
44     <div class="main-center">中间div>
45     <div class="main-right">右列div>
46 div>
47 <div id="footer">页脚div>
48 body>
49 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:100%;
14     position:relative;
15 }
16 #main .main-left{
17     width:200px;
18     height:800px;
19     background:red;
20     position:absolute;
21     left:0;
22     top:0;
23 }
24 #main .main-center{
25     height:800px;
26     background:lightgreen;
27     margin:0 310px 0 210px;
28 }
29 #main .main-right{
30     width:300px;
31     height:800px;
32     background:pink;
33     position:absolute;
34     right:0;
35     top:0;
36 }
37 #footer{
38     height:50px;
39     background:gray;
40 }
41 style>
42 head>
43 <body>
44 <div id="herder">页头div>
45 <div id="main">
46     <div class="main-left">左列div>
47     <div class="main-center">设计网页的第一步就是设计版面布局,搭建网站结构,网页排版的合理性,在一定程度上也影响着网站整体的布局以及后期的优化。一个好的网站形象能更容易地吸引用户、留住用户。因此,网站首页第一屏的排版非常重要,很多时候能决定用户的去与留。div>
48     <div class="main-right">右列div>
49 div>
50 <div id="footer">页脚div>
51 body>
52 html>

人气教程排行