column-count

The column-count property in CSS controls how many vertical columns text in a particular element will be broken into. For instance:

column-count 属性用于控制元素垂直划分的列数,如:

1
2
3
p.intro-text {
column-count: 3;
}

column-gap 用于指定文本之间的空隙:

1
2
3
4
p.intro-text {
column-count: 3;
column-gap: 20px;
}

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.




Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.



1
2
column-count: 3;
column-gap: 20px;

column-width

See column-width

The browser will calculate how many columns of at least that width can fit in the space. Think of column-width as a minimum width suggestion for the browser.

column-width 可以设置为 auto 或者长度。

如果你使用 column-count,你可以将 column-width 设置为 auto。这时,布局以 column-count 为准。

columns

See columns

columnscolumn-countcolumn-width 的简写属性。当同时使用 column-countcolumn-width 时,column-count 是列数的最大值,column-width 指定每列的最小长度。使用这些属性,多列布局在小宽度的浏览器中会自动合并为一个单列,而无需借助媒体查询或者其他规则。

column-span

See column-span

在多列布局中,你可以使用 column-span 来让元素实现跨列:

1
2
3
4
h2 {
-webkit-column-span: all;
column-span: all;
}

column-span 的值可以是 all or none。设置 column-span: all 可以让它跨所有的列。none 值可以结束元素跨列,你可以结合媒体查询使用或者让跨列元素停止跨列。


Sed dignissim lacinia nunc Sed dignissim lacinia nunc


Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.


Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.


1
2
3
4
5
6
7
8
9
10
11
.container {
columns: 4 150px;
column-gap: 2em;
}
h1 {
column-span: all;
font-size: 2em;
margin-bottom: 0.5em;
line-height: 1.2;
}

column-rule

See column-rule

你可以在列之间添加垂直线来分隔,这条线位于类空隙中间。

1
2
3
4
5
6
7
8
.container {
-webkit-columns: 2 400px;
-moz-columns: 2 400px;
columns: 2 400px;
-webkit-column-rule: 1px solid black;
-moz-column-rule: 1px solid black;
column-rule: 1px solid black;
}

这个属性是 column-rule-width, column-rule-style, and column-rule-color 的简写,这和 border 的值一样。

1
2
3
4
5
6
7
8
9
-webkit-column-rule-width: 1px;
-moz-column-rule-width: 1px;
column-rule-width: 1px;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
-webkit-column-rule-color: black;
-moz-column-rule-color: black;
column-rule-color: black;

column-rule-width 值可以是 3px 或者类似于 thin 的关键字。column-rule-style 可以是任意的 border-style 值,如 solid, dotted, and dashed


This example uses column-rule-style: dotted;.


Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.


1
2
3
4
5
.container {
columns: 3 150px;
column-gap: 5em;
column-rule: 1px solid #ccc;
}

Tutorial