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>

最后

以上就是难过草丛为你收集整理的CSS3--多列布局模块的全部内容，希望文章能够帮你解决CSS3--多列布局模块所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。