CSS3的"Multi-column"按大块主要分成以下几块:
1、列数和列宽:column-count;column-width;columns
2、列的间距和分列样式:column-gap;column-rule-color;column-rule-style;column-rule-width;column-rule;
3、列的分栏符:break-before;break-after;break-inside;
4、跨越列:column-span;
5、填充列:column-fill。
一、
column-count(列数):语法:column-count:auto | 整数; auto为默认值。
兼容性:

Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
实例:
.box{width: 400px;
border: 1px solid #ccc;
padding: 10px;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
效果:

二、column-width(列宽度):语法:column-width:auto | length; auto为默认值。
兼容性:
实例:
.newspaper
{
-moz-column-width:100px; /* Firefox */
-webkit-column-width:100px; /* Safari and Chrome */
column-width:100px;
}
效果:

三、columns:columns是把前面两个属性合并在一起使用。
语法:columns:column-width | column-count; auto为默认值。
兼容性:

Internet Explorer 10 和 Opera 支持 column 属性。
Firefox 支持替代的 -moz-column 属性。
Safari 和 Chrome 支持替代的 -webkit-column 属性。
实例:
.newspaper
{
columns:100px 2;
-webkit-columns:100px 2; /* Safari and Chrome */
-moz-columns:100px 2; /* Firefox */
}
评论