使用css3进行UL分列

html文件内容很简单

<ul class="list-columns">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>  
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>  
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>  
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>      
</ul>

然后对.list-columns的class编写css3

.list-columns {
-moz-column-count: 3;
-moz-column-gap: 60px;
-webkit-column-count: 3;
-webkit-column-gap: 60px;
column-count: 3;
column-gap: 60px;
}

其中column-fill还有一个属性,但是测试浏览器不支持,所以去掉了。

奶牛 | 2018年08月1日
  • huangjun 2018年08月23日 at 11:56 上午
    你博客跳转页面的形式好酷~!
    • 奶牛 2019年01月18日 at 1:23 下午
      嗯,是挺酷炫的,tf上面一个主题,但是原作者不更新了,有挺多bug的,自己改了一些,现在也懒得弄这些东西了说实话。
Comments are closed.