CSS实现栅格布局

CSS实现栅格布局

 设置容器container：

.grid-container {
    width: 100%;
    max-width: 1200px;
}

清除浮动：

.row:before, .row:after {
    content: "";
    display: block;
    height: 0;
    width: 0;
    visibility: hidden;
    clear: both;
}

假设有12列布局：

[class*='col_'] {
    float: left;
    min-height: 1px;
    width: 8.33%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.col_1 { width: 8.33%; }
.col_2 { width: 16.66%; }
.col_3 { width: 25%; }
.col_4 { width: 33.33%; }
.col_5 { width: 41.66%; }
.col_6 { width: 50%; }
.col_7 { width: 58.33%; }
.col_8 { width: 66.66%; }
.col_9 { width: 75%; }
.col_10 { width: 83.33%; }
.col_11 { width: 91.66%; }
.col_12 { width: 100%; }

实例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <link rel="stylesheet" type="text/css" href="style.css">
 6     <title>自适应布局</title>
 7     <style type="text/css">
 8         body {
 9             margin: 0;
10         }
11         .header {
12             background-color: #000;
13             color: #fff;
14             height: 5vh;
15             text-align: center;
16             line-height: 5vh;
17         }
18         .footer {
19             width: 100%;
20             background-color: #000;
21             color: #fff;
22             height: 5vh;
23             text-align: center;
24             line-height: 5vh;
25             position: fixed;
26             bottom: 0;
27         }
28         .grid-container {
29             margin: 0 auto
30         }
31         .col_3 {
32             height: 90vh;
33             background-color: #ddd;
34         }
35         .col_9 {
36             height: 90vh;
37             background-color: #ccc;
38         }
39     </style>
40 
41     <script type="text/javascript">
42         let width = document.documentElement.getBoundingClientRect().width;
43         // 1rem = 1vw;
44         let rem = width/100;
45         document.documentElement.style.fontSize = rem+'px';
46     </script>
47 </head>
48 <body>
49 <header class="header">header</header>
50 <div class="grid-container">
51     <div class="row">
52         <div class="col_3">col_3</div>
53         <div class="col_9">col_9</div>
54     </div>
55 </div>
56 <footer class="footer">footer</footer>
57 </body>
58 </html>

 

posted @ 2018-03-19 16:01  momobutong  阅读(8113)  评论(0)  编辑  收藏  举报