【演示】CSS3 Columns:比table更好用的分列式布局方法

请阅读 CSS3 Columns:比table更好用的分列式布局方法

请看下面的布局结构，完全是用CSS3的column-*属性完成的！

UL, column-count 3, column-gap: 10px

  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目

UL, column-count 3, column-gap: 10px, -webkit-column-rule: 2px solid #fc0

  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目
  • 条目

DIV, column-count 3, spans

表头!

列 1
列 2
列 3
列 4
列 5
列 6
列 7
列 8
列 9
列 10
列 11
列 12