CSS3--多列布局模块

[b]多列布局模块（CSS Multi Column Layout Module）[/b]
为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局。
优势：不需要计算宽度，不需要担心内容是否会撑破布局，这些数学问题系统都会帮你计算。还有一个，那就是清晰整洁的语义！

语法：
columns：<column-width> || <column-count>
用来定义多列中每列的宽度 用来定义多列中的列数

大部分主流浏览器对其支持还不错：
[img]http://dl2.iteye.com/upload/attachment/0105/1642/7d3a8ee3-c0b8-3f0e-8e88-aa2fed3e5bea.jpg[/img]

<style type="text/css">
.columns {
  width: 500px;
  padding: 5px;
  border: 1px solid green;
  margin: 20px auto; 
  -webkit-columns:150px 3;
  -moz-columns: 150px 3;
  -o-columns:150px 3;
  -ms-columns: 150px 3;
  columns: 150px 3;
}
</style>
<div class="columns">
  <h2>我要分列显示</h2>
  <p>我要分别显示效果bulabula这个样子bulabulabula这个样子bulabula这个样子bulabula这个样子bulabula这个样子bulabula这个样子bulabula这个样子的。</p>
  <p>我要分别显示效果bulabula这个样子bulabulabula这个样子bulabula这个样子bulabula这个样子bulabula这个样子bulabula这个样子bulabula这个样子的。</p>
</div>

[img]http://dl2.iteye.com/upload/attachment/0105/1665/54ee835f-8d97-3f1c-9bea-7317a62b9364.jpg[/img]


也可以单独使用 column-width和column-count单独对多列进行设置。
对多列也有一些属性可以进行美化，详情点击：[url]http://wangjingyi.iteye.com/blog/2175138[/url]