1 <!DOCTYPE html>
2 <html lang="zh">
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 <style type="text/css">
9 *{
10 margin: 0;
11 padding: 0;
12 }
13 .c{
14 float: left;
15 width: 200px;
16 border: 1px solid darkred;
17 box-sizing: border-box;
18 margin-left: calc(50% - 300px);
19 }
20 .c:nth-of-type(3n+1){
21 margin-left: 0;
22 }
23 </style>
24 </head>
25 <body>
26 <div class="pp">
27 <div class="c">
28 123
29 </div>
30 <div class="c">
31 123
32 </div>
33 <div class="c">
34 123
35 </div>
36 <div class="c">
37 123
38 </div>
39 <div class="c">
40 123
41 </div>
42 <div class="c">
43 123
44 </div>
45 <div class="c">
46 123
47 </div>
48 <div class="c">
49 123
50 </div>
51 </div>
52 <script type="text/javascript">
53 </script>
54 </body>
55 </html>
