圣杯布局与双飞翼布局

　　两种方式实现多列布局：

　　

　　圣杯布局：

 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，避免了也可能出现的未知错误。

　　双飞翼布局：

 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

 

posted on 2015-07-06 22:33  忄去  阅读(280)  评论(0)  编辑  收藏  举报

导航