元素下方超出换列

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

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

则可以使用column-count

column-count可以指定最大列数

代码语言：javascript复制

column-count: 3;
column-count: auto;

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

简写属性：columns

代码语言：javascript复制

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

代码语言：javascript复制

<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

代码语言：javascript复制

.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.

into three columns using the text is equally distributed

css auto count distributed text

0 人点赞