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

<!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

猜你喜欢

转载自blog.csdn.net/boyit0/article/details/88974466