columns

版本：CSS3

CSS属性columns用来设置元素的列宽和列数。它是一个简写属性，可在单个方便的声明中设置column-width和column-count属性。与所有简写属性一样，任何省略的子值都将设置为其初始值。

示例

/* column width */
columns: 18em;

/* column count */
columns: auto;
columns: 2;

/* both column width and count */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;

/* global values */
columns: inherit;
columns: initial;
columns: unset;

浏览器支持

IE10以上版本的浏览器都支持columns

语法：

columns：<column-width>||<column-count>

取值

• <column-width>：预计列宽，定义为<length>或auto关键字。实际宽度可以更宽或更窄以适合可用空间。参见column-width。
• <<column-count>：元素内容应分成的预计列数，定义为<integer>或auto关键字。如果此值和列的宽度都不是auto，则它仅指示允许的最大列数。请参阅column-count。

例子

//HTML

<p class="content-box">
  this is a bunch of text split into three columns
  using the css `columns` property. the text
  is equally distributed over the columns.
</p>

//CSS
.content-box {
  columns: 3 auto;
}

div{
 columns:100px 3;
 -webkit-columns:100px 3; /*safari and chrome*/
 -moz-columns:100px 3; /*firefox*/
}