根本不应该为取悦别人而使自己失敬于人——卢俊
我们有时候需要这种需求:元素高度超出后换到下一列
则可以使用column-count
column-count
可以指定最大列数
column-count: 3; column-count: auto; column-count: inherit; column-count: initial; column-count: unset;
简写属性:columns
/* 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
<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; }
Result
This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.