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*/
}