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

CSS3的columns制作页面布局有很多优势：

你不需要计算宽度，

不需要担心内容是否会撑破布局，这些数学问题系统都会帮你计算。

还有一个，那就是清晰整洁的语义

CSS3里的column系列属性提供了各种不同的功能，通过组合使用它们，你能得到相应的任何分栏式布局：
column-count: 列数目
column-gap: 各列之间间隙宽度
column-width: 建议宽度；未必会使用，浏览器基于此数值进行计算
column-rule-width：列之间分割线宽度
column-rule-style：列之间分割线风格
column-rule-color：列之间分割线演示
column-span: 允许一个元素的宽度跨越多列
column-fill: 分列方式

CSS:

div.col {
	-webkit-column-count: 2;
	-webkit-column-gap: 5px;
	-webkit-column-rule:1px solid red;
	
	-moz-column-count: 2;
	-moz-column-gap: 5px;
	-moz-column-rule:1px solid red;
	
	font-size:12px;
	border:1px solid #e2e2e6;
}

div.col h3 {
	-webkit-column-span: all;  
	
	-moz-column-span: all;
	
	text-align:center;
	background: #eee;
}

HTML:  div也可换成<ul><li></li></ul> 式

<div class="col">
	<h3>表头</h3>
	<div>列 1</div>
	<div>列 2</div>
	<div>列 3</div>
	<div>列 4</div>
	<div>列 5</div>
	<div>列 6</div>
	<div>列 7</div>
	<div>列 8</div>
	<div>列 9</div>
	<div>列 10</div>
</div>

效果图：