京东区块排版负margin用法 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>京东区块排版负margin用法</title>
 6     <style>
 7         *{margin:0;padding:0}
 8         .wrap{
 9             margin-top: 10px;
10             overflow: hidden;
11             clear: both;
12             width: 990px;
13             margin: 0 auto;
14         }
15         .ul{
16             background:#f0f;
17             overflow: hidden;
18             margin-left:-10px;
19         }
20         li{
21             float: left;
22             padding: 15px 0px 25px 0px;
23             width: 240px;
24             overflow: hidden;
25             background-color: #f45;
26             margin-bottom: 10px;
27             margin-left: 10px;
28         }
29         .demo{width:990px;height:20px;background: black;margin: 0 auto;
30         }
31     </style>
32 </head>
33 <body>
34 <div class="wrap">
35     <ul class="ul">
36         <li></li>
37         <li></li>
38         <li></li>
39         <li></li>
40         <li></li>
41         <li></li>
42         <li></li>
43         <li></li>
44         <li></li>
45         <li></li>
46         <li></li>
47         <li></li>
48         <li></li>
49         <li></li>
50         <li></li>
51         <li></li>
52     </ul>
53 </div>
54 
55 </body>
56 </html>

主要是ul的设置，两点1、不能设置宽度2、负margin等于margin-left的值；

每个li的宽度计算方法等于li.width = （warp.width+margin-left）/li的个数-margin-left;

posted @ 2016-04-08 21:52  挥刀  阅读(283)  评论(0)  编辑  收藏  举报