zoukankan html css js c++ java

圣杯布局与双飞翼布局

　　两种方式实现多列布局：

　　圣杯布局：

 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

查看全文

相关阅读:
mysql 查看某数据库各个表容量大小SQL
Gated RNN（《深度学习进阶》第六章总结）
RNN（《深度学习进阶》第五章总结）
word2vec的改进（《深度学习进阶》第四章总结）
201521123024 《Java程序设计》第九周学习总结
 如何在vue项目中使用md5及base64加密
 vite+vue3.0+vue-router+vuex快速搭建项目
 vite+vue3.0搭建项目
 MySQL创建计划任务
 MySQL基础函数

原文地址：https://www.cnblogs.com/-------perfect/p/4625608.html