h5移动端百分比 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0">
 7     <title>Document</title>
 8     <style>
 9         /*
10 
11         要想设置当前容器的高度或宽度百分比，必须“明确”知道父容器的高度或宽度
12   */
13         
14         * {
15             padding: 0;
16             margin: 0;
17         }
18         
19         .one {
20             width: 20%;
21             height: 100px;
22             float: left;
23             background: red;
24         }
25         
26         .two {
27             width: 30%;
28             float: left;
29             background: blue;
30         }
31         
32         .three {
33             width: 50%;
34             height: 100px;
35             float: left;
36             background: green;
37         }
38         
39         .four {
40             width: 50%;
41             height: 50%;
42             background: #fff;
43         }
44     </style>
45 </head>
46 
47 <body>
48     <div class="one"></div>
49     <div class="two"></div>
50     <div class="three">
51         <div class="four"></div>
52     </div>
53 
54 </body>
55 
56 </html>

 

posted @ 2017-12-05 15:50  Sunsin  阅读(1502)  评论(0)    收藏  举报