阿超 > 元素下方超出换列

元素下方超出换列

2023-05-09

前端

根本不应该为取悦别人而使自己失敬于人——卢俊

我们有时候需要这种需求：元素高度超出后换到下一列

则可以使用column-count

column-count可以指定最大列数

1
2
3
4
5
6
column-count: 3;
column-count: auto;

column-count: inherit;
column-count: initial;
column-count: unset;

简写属性：columns

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 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;

例子：

HTML

1
2
3
4
5
<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

1
2
3
.content-box {
  columns: 3 auto;
}

Result

This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.