聖盃佈局與雙飛翼佈局

時間 2019-11-09

標籤佈局雙飛简体版

原文原文鏈接

　　兩種方式實現多列布局：css

　　聖盃佈局：html

 1 <html>
 2 <head>
 3     <title>Html+Css Layout</title>
 4     <style type="text/css">
 5     .header{
 6         background-color: #0000aa;
 7         height: 100px;
 8     }
 9     .article{
10         height: 300px;
11         background-color: #ddd;
12     }
13     .footer{
14         height: 100px;
15         background-color: #ccc;
16     }    
17     .article{
18         padding-left: 150px;
19         padding-right: 100px;
20     }
21     .middle{
22         width: 100%;
23         height: 100%;
24         background-color: #faf;
25 
26         float: left;
27     }
28     .left{
29         background-color: #fa0;
30         height: 100%;
31         width: 150px;
32 
33         float: left;
34         margin-left: -100%;
35         position: relative;
36         left: -150px;
37     }
38     .right{
39         background-color: red;
40         width: 100px;
41         height: 100%;
42 
43         float: left;
44         margin-left: -100px;
45         position: relative;
46         right: -100px;
47     }
48     </style>
49 </head>
50 <body>
51     <div class="header">title</div>
52     <div class="article">
53         <div class="middle">middle</div>
54         <div class="left">left</div>
55         <div class="right">right</div>
56     </div>
57     <div class="footer">copyright@</div>
58 </body>
59 </html>

View Code

　　聖盃佈局使用了position:relative 和left:-150px結合，就使元素相對自身位置發生位移。可是實際工做可能會對.left,.right有特殊的position要求，因此出現了改良版的雙飛翼佈局，去掉了position，增長了佈局的靈活性。同時也去掉了父層的padding-left,padding-right，避免了也可能出現的未知錯誤。ide

　　雙飛翼佈局：佈局

 1 <html>
 2 <head>
 3     <title>Html+Css Layout</title>
 4     <style type="text/css">
 5     .header{
 6         background-color: #0000aa;
 7         height: 100px;
 8     }
 9     .article{
10         height: 300px;
11         background-color: #ddd;
12     }
13     .footer{
14         height: 100px;
15         background-color: #ccc;
16     }    
17     .article{
18 /*        padding-left: 150px;
19         padding-right: 100px;*/
20     }
21     .middle{
22         width: 100%;
23         height: 100%;
24         background-color: #faf;
25 
26         float: left;
27     }
28     .left{
29         background-color: #fa0;
30         height: 100%;
31         width: 150px;
32 
33         float: left;
34         margin-left: -100%;
35 /*        position: relative;
36         left: -150px;*/
37     }
38     .right{
39         background-color: red;
40         width: 100px;
41         height: 100%;
42 
43         float: left;
44         margin-left: -100px;
45 /*        position: relative;
46         right: -100px;*/
47     }
48     .inner{
49         margin-left: 150px;
50         margin-right: 100px;
51     }
52     </style>
53 </head>
54 <body>
55     <div class="header">title</div>
56     <div class="article">
57         <div class="middle">
58             <div class="inner">middle</div>
59         </div>
60         <div class="left">left</div>
61         <div class="right">right</div>
62     </div>
63     <div class="footer">copyright@</div>
64 </body>
65 </html>

View Code

相關標籤/搜索

每日一句

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