css每列四行，加载完一列后数据自动填充到下一列

傷城~ 2022-04-23 15:50 193阅读 0赞

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
     </head>
    
     <body>
      <style type="text/css">
        ul, li {
            margin: 0;
            padding: 0;
        }
    ul {
        margin:0px;
        padding:0px;
        height:200px;
        width: 100px;
        text-align: center;
        -moz-column-gap: 12px;
        -moz-column-count: 1;
        -moz-column-rule: 1px solid #d8d8d8;
        -webkit-column-gap: 12px;
        -webkit-column-count: 1;
        -webkit-column-rule: 1px solid #d8d8d8;
        column-gap: 12px;
        column-count: 1;
        column-rule: 1px solid #d8d8d8;
     }
    ul li{
        list-style: none;
        height: 50px;
        line-height: 50px;
     }  display: inline-block;
    
    </style>
    <ul class="itemContainer">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
    </ul>
    
     </body>
    </html>

[https://www.cnblogs.com/binarytree-fe/p/5629714.html][https_www.cnblogs.com_binarytree-fe_p_5629714.html]

[https_www.cnblogs.com_binarytree-fe_p_5629714.html]: https://www.cnblogs.com/binarytree-fe/p/5629714.html