DIV+CSS 網頁佈局之：三列布局

時間 2019-11-18

標籤 div+css div css 網頁佈局欄目 HTML 简体版

原文原文鏈接

一、寬度自適應三列布局

　　三列布局的原理和兩列布局的原理是同樣的，只不過多了一列，只需給寬度自適應兩列布局中間再加一列，而後從新計算三列的寬度，就實現了寬度自適應的三列布局。html

　　一樣的道理，更多列的佈局，其實和兩列、三列的佈局模式是同樣的。佈局

 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>

二、左右兩列固定寬度，中間內容寬度自適應

　　要想實現左右兩列固定寬度，中間寬度自適應的佈局，那麼使用浮動就作不到了，使用浮動以後頁面就亂了，必須使用絕對定位來將三列固定在一行。優化

 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>

相關標籤/搜索

每日一句

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