元素下方超出换列

简介: 元素下方超出换列

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

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

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

相关文章
|
架构师 测试技术 Linux
嵌入式软件架构中抽象层设计方法
嵌入式软件架构中抽象层设计方法
403 0
|
缓存 安全 PHP
【阿里云镜像】配置阿里云 Composer 全量镜像
【阿里云镜像】配置阿里云 Composer 全量镜像
2934 0
【阿里云镜像】配置阿里云 Composer 全量镜像
|
8月前
|
人工智能
替代你的不是AI,而是会使用AI的人——生成式人工智能(GAI)认证成为职场新宠
在AI技术飞速发展的数字化时代,职场环境正经历深刻变革。生成式人工智能(GAI)认证的出现,为职场人士提供了提升自我、证明能力的新途径。由培生推出的GAI认证,涵盖核心技能与伦理知识,助力求职者脱颖而出。它不仅是职场晋升的加速器,还为企业认可的专业能力背书。拥抱AI、学习AI,通过GAI认证,让自己成为掌握AI技术的领先者,在竞争中保持优势。
|
Web App开发 存储 前端开发
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
687 0
|
安全 Linux Shell
OverTheWire Bandit 通关解析(中)
OverTheWire Bandit 通关解析(中)
|
物联网 区块链 vr&ar
构建高效Android应用:Kotlin协程的实践指南未来交织:新兴技术趋势与跨领域应用探索
【5月更文挑战第28天】随着移动应用开发的不断进步,开发者寻求更高效、更简洁的方式来处理异步任务和提升用户体验。在Android平台上,Kotlin协程作为一种轻量级的线程管理方案,提供了强大的工具来简化并发和异步编程。本文将深入探讨Kotlin协程的核心概念,并通过实例演示如何在Android应用中利用协程优化性能和响应性。通过本文,你将学会如何运用协程来编写更加流畅和高效的代码,同时减少内存消耗和提高应用的稳定性。 【5月更文挑战第28天】 随着科技的迅猛发展,一系列创新技术如区块链、物联网(IoT)、虚拟现实(VR)等正在逐渐从概念验证走向实际应用。这些技术的融合与交叉不仅预示着信息时
|
存储 缓存 算法
《信息物理融合系统(CPS)设计、建模与仿真——基于 Ptolemy II 平台》——第3章 数据流 3.1同步数据流
Ptolemy II 能够使异构系统的开发和仿真一同进行,将开发和仿真作为整个系统建模的一部分。正如前两章讨论的那样,不同于其他设计和建模环境,Ptolemy II的一个关键创新在于支持多种计算模型,这些计算模型可被剪裁以适应具体的建模问题。
1909 0
|
存储 C语言
求两数之和,这个方法小白也能轻松掌握!
求两数之和,这个方法小白也能轻松掌握!
|
Java
|
异构计算
FPGA 8-3译码器(一)
FPGA 8-3译码器(一)
172 0
FPGA 8-3译码器(一)