京东区块排版负margin用法

矫情吗；* 2021-12-15 11:41 215阅读 0赞

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;

转载于:https://www.cnblogs.com/suoking/p/5370116.html