元素下方超出换列

简介: 元素下方超出换列

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

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

则可以使用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.

相关文章
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
79 0
uniapp滑动到一定的高度后固定某个元素到顶部效果demo(整理)
uniapp滑动到一定的高度后固定某个元素到顶部效果demo(整理)
scrollIntoView()定位元素显示导致页面上移解决方法?
scrollIntoView()定位元素显示导致页面上移解决方法?
644 0
页面点击随机字符
页面点击随机字符
57 0
|
PHP
php常用自建函数学习(1):标题或内容超过长度时在尾处加上省略号...
php常用自建函数学习(1):标题或内容超过长度时在尾处加上省略号...
78 0
|
人工智能 搜索推荐 vr&ar
每日一题[LeetCode 315]计算右侧小于当前元素的个数
发现leetcode的困难难度做起来还是需要点时间的(还是我太菜了),而且可能大多数人也不能接受,所以明天开始穿插做中等难度题目。
100 0
力扣315计算右侧小于当前元素的个数
力扣315计算右侧小于当前元素的个数
94 0
|
Python
LeetCode 1299. 将每个元素替换为右侧最大元素
给你一个数组 arr ,请你将每个元素用它右边最大的元素替换,如果是最后一个元素,用 -1 替换。
99 0
WORD出错:布局也会超出内容区
WORD出错:布局也会超出内容区
89 0
WORD出错:布局也会超出内容区