css实现每行三个位元素布局 

 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>

 

posted on 2019-03-05 11:04  时光游弋  阅读(1054)  评论(0)    收藏  举报