元素下方超出换列

简介: 元素下方超出换列

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

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

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

相关文章
|
6天前
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
|
6月前
span标签显示固定长度显示省略号,光标放上显示全部
span标签显示固定长度显示省略号,光标放上显示全部
|
6天前
|
索引
将数组指定索引位置的元素 移动到 目标索引位置,且不改变其他元素原本的顺序,注意这个不是对调元素位置,是移动某一个元素位置不影响其他元素顺(使用场景:拖拽改变数据的顺序,点击上下左右箭头移动元素顺序)
将数组指定索引位置的元素 移动到 目标索引位置,且不改变其他元素原本的顺序,注意这个不是对调元素位置,是移动某一个元素位置不影响其他元素顺(使用场景:拖拽改变数据的顺序,点击上下左右箭头移动元素顺序)
|
7月前
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
32 0
|
9月前
scrollIntoView()定位元素显示导致页面上移解决方法?
scrollIntoView()定位元素显示导致页面上移解决方法?
236 0
|
6月前
页面点击随机字符
页面点击随机字符
31 0
多行文本溢出省略号击展开收缩(整理)
多行文本溢出省略号击展开收缩(整理)
|
Python
LeetCode 1299. 将每个元素替换为右侧最大元素
给你一个数组 arr ,请你将每个元素用它右边最大的元素替换,如果是最后一个元素,用 -1 替换。
73 0
【C#】【平时练习】将左边列表框(List)的内容(月份)添加到右边列表框。最终右侧显示的内容(月份)要保持一定顺序
【C#】【平时练习】将左边列表框(List)的内容(月份)添加到右边列表框。最终右侧显示的内容(月份)要保持一定顺序
101 0
【C#】【平时练习】将左边列表框(List)的内容(月份)添加到右边列表框。最终右侧显示的内容(月份)要保持一定顺序
|
前端开发 容器
每日一题:如何判断一个元素是否在可视区域中?
每日一题:如何判断一个元素是否在可视区域中?
320 0
每日一题:如何判断一个元素是否在可视区域中?