CSS代码
CSS3里的column系列属性提供了各种不同的功能，通过组合使用它们，你能得到相应的任何分栏式布局：
column-count: 列数目
column-gap: 各列之间间隙宽度
column-width: 建议宽度；未必会使用，浏览器基于此数值进行计算
column-rule-width：列之间分割线宽度
column-rule-style：列之间分割线风格
column-rule-color：列之间分割线演示
column-span: 允许一个元素的宽度跨越多列
column-fill: 分列方式
要想制作出一个漂亮的分列布局，你至少需要用到column-count和column-gap：
/* 3 列，每列之间10px间距 */ul.col-3 {
column-count: 3; column-gap: 10px;}
如果你想美化一下列之间的空隙，这也很简单：
/* 3 列，每列之间10px间距 ，带有金色的隔离线 */ul.col-3 {
column-count: 3; column-gap: 10px; column-rule: 1px solid #fc0;}
指定的元素还可以横跨多列：
/* 以下面的HTML为例:
<div> <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>列 11</div> <div>列 12</div> </div>
*/div.col-3 {
column-count: 3;
column-gap: 5px;}div.col-3 h2 {
column-span: all;
text-align:center;
background: #eee;}非常的简单，而且显示结果完全符合我们的预期！
使用CSS3的columns制作页面布局有很多优势：你不需要计算宽度，你不需要担心内容是否会撑破布局，这些数学问题系统都会帮你计算。还有一个，那就是清晰整洁的语义。
以上内容就是关于css3的columns制作页面布局，希望对大家有帮助。
下载本文