均匀分布

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7     <title>均匀分布</title>
  8 
  9     <style>
 10         .container{
 11             width: 1000px;
 12             margin: 50px auto;
 13             border: 1px solid #ddd;
 14             overflow: hidden;
 15             /* padding: 10px; */
 16         }
 17 
 18         .box{
 19             background: #0f0;
 20             height: 200px;
 21             /* width: 16%; */
 22             width: calc(100% / 6);
 23             float: left;
 24         }
 25         .box:nth-child(2){
 26             background: #00f;
 27         }
 28         .box:nth-child(3){
 29             background: #f00;
 30         }
 31         .box:nth-child(4){
 32             background: #ff0;
 33         }
 34         .box:nth-child(5){
 35             background: #f0f;
 36         }
 37         .box:nth-child(6){
 38             background: #0ff;
 39         }
 40 
 41         
 42         body{
 43             margin: 0;
 44         }
 45 
 46         html, body, .mobile{
 47             height: 100%;
 48         }
 49 
 50         .header{
 51             height: 45px;
 52             background: #333;
 53         }
 54 
 55         .body{
 56             display: block;
 57             height: calc(100% - 85px);
 58             overflow: auto;
 59         }
 60 
 61         .footer{
 62             height: 40px;
 63             background: #0f0;
 64         }
 65     </style>
 66 </head>
 67 <body>
 68 
 69     <!-- <div class="container">
 70         <div class="box"></div>
 71         <div class="box"></div>
 72         <div class="box"></div>
 73         <div class="box"></div>
 74         <div class="box"></div>
 75         <div class="box"></div>
 76     </div>     -->
 77 
 78     <div class="mobile">
 79         <header class="header"></header>
 80         <session class="body">
 81             <h2>asdfasdfasdf</h2>
 82             <h2>asdfasdfasdf</h2>
 83             <h2>asdfasdfasdf</h2>
 84             <h2>asdfasdfasdf</h2>
 85             <h2>asdfasdfasdf</h2>
 86             <h2>asdfasdfasdf</h2>
 87             <h2>asdfasdfasdf</h2>
 88             <h2>asdfasdfasdf</h2>
 89             <h2>asdfasdfasdf</h2>
 90             <h2>asdfasdfasdf</h2>
 91             <h2>asdfasdfasdf</h2>
 92             <h2>asdfasdfasdf</h2>
 93             <h2>asdfasdfasdf</h2>
 94             <h2>asdfasdfasdf</h2>
 95             <h2>asdfasdfasdf</h2>
 96             <h2>asdfasdfasdf</h2>
 97             <h2>asdfasdfasdf</h2>
 98         </session>
 99         <footer class="footer">
100 
101         </footer>
102     </div>
103 </body>
104 </html>