CSS3中多列布局详解
多列布局
概念：在CSS3之前，想要设计类似报纸那样的多列布局，有两种方式可以实现：一种是"浮动布局"，另一种是“定位布局”。
这两种方式都有缺点：浮动布局比较灵活，但不容易控制；定位布局可以精准定位，但是不够灵活
为了解决这多列布局的难题，CSS3新增了一种布局方式-多列布局。多列布局提供了一种多列组织内容的方式，可以简单的实现类似报纸格式的布局。
在CSS3中，多列布局常用的属性有以下属性
| 属性值 | 说明 |
|---|---|
| column-count | 定义元素的列数 |
| column-width | 定义每一列的宽度 |
| column-gap | 定义两列之间的距离 |
| column-rule | 定义两列之间的边框样式 |
| column-span | 定义跨列样式 |
列数：column-count
概念：column-count属性用来定义多列布局的列数
语法：
column-count:auto|number;
属性值
| 属性值 | 说明 |
|---|---|
| auto | 默认值，表示列数由column-width属性决定 |
| number | 表示自动划分几列 |
实例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>列数</title><style>div{width:400px;padding:10px;border:1px solid blueviolet;column-count:2;}h1{height:60px;line-height:60px;text-align:center;background-color:rgba(83,199,86,0.6);}p{font-family:"仿宋";font: size:16px;}</style></head><body><div><h1>顾城</h1><p>命运不是风来回吹，命运是大地，走到哪里你都在命中。从叶到花，或从花到叶，于科研是一个过程，而于生命自身则永远只在此刻。花和叶都是一种记忆方式，果子同时也是种子。生命是闪耀的此刻，不是过程，就像芳香不需要道路一样。诗是树叶，比秋天短，比世界长。</p><h1>史铁生</h1><p>于是得有一种道路，你愿2意为之生也愿意为之死，愿意为之累，愿意在它的引力下耗尽生命。不是强言不悔，是清醒地从命。死亡来临时有一个仪式，灰和土都好，看往日轻轻地蒸发，但同时明白，有什么东西沉沉地还在。不求还在现实中，但愿还在美丽的位置上。于爱者而言，爱情怎么会是悲剧？对春天而言，秋天是它的悲剧吗？</p></div></body>
</html>
运行结果
列宽：column-width
概念：column-width属性用来定义多列布局中每一列的宽度
语法：
column-width:auto|number;
属性值
| 属性值 | 说明 |
|---|---|
| auto | 默认值，表示列数由column-count属性决定 |
| number | 表示每列的宽度。值为正数，否则属性会无效。单位可以为px、em和百分比等 |
实例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>列宽</title><style>div{width:400px;padding:10px;border:1px solid blueviolet;/* 每一列宽度为100px */column-width:100px;}h1{height:60px;line-height:60px;text-align:center;background-color:rgba(83,199,86,0.6);}p{font-family:"仿宋";font: size:16px;}</style></head><body><div><h1>顾城</h1><p>命运不是风来回吹，命运是大地，走到哪里你都在命中。从叶到花，或从花到叶，于科研是一个过程，而于生命自身则永远只在此刻。花和叶都是一种记忆方式，果子同时也是种子。生命是闪耀的此刻，不是过程，就像芳香不需要道路一样。诗是树叶，比秋天短，比世界长。</p><h1>史铁生</h1><p>于是得有一种道路，你愿2意为之生也愿意为之死，愿意为之累，愿意在它的引力下耗尽生命。不是强言不悔，是清醒地从命。死亡来临时有一个仪式，灰和土都好，看往日轻轻地蒸发，但同时明白，有什么东西沉沉地还在。不求还在现实中，但愿还在美丽的位置上。于爱者而言，爱情怎么会是悲剧？对春天而言，秋天是它的悲剧吗？</p></div></body>
</html>
运行结果
间距：column-gap
概念：column-gap属性用于定义元素列与列之间的间距大小
语法：
column-gap:normal|number;
属性值
| 属性值 | 说明 |
|---|---|
| normal | 默认值，表示浏览器默认长度值 |
| number | 定义列之间的间隔大小。属性值必须是正数。单位可以是px、em和百分比等 |
实例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>列宽</title><style>div{width:400px;padding:10px;border:1px solid blueviolet;/* 定义列数目为2*/column-count:2;/* 定义列间距为100px */column-gap:100px;}h1{height:60px;line-height:60px;text-align:center;background-color:rgba(83,199,86,0.6);}p{font-family:"仿宋";font: size:16px;}</style></head><body><div><h1>顾城</h1><p>命运不是风来回吹，命运是大地，走到哪里你都在命中。从叶到花，或从花到叶，于科研是一个过程，而于生命自身则永远只在此刻。花和叶都是一种记忆方式，果子同时也是种子。生命是闪耀的此刻，不是过程，就像芳香不需要道路一样。诗是树叶，比秋天短，比世界长。</p><h1>史铁生</h1><p>于是得有一种道路，你愿2意为之生也愿意为之死，愿意为之累，愿意在它的引力下耗尽生命。不是强言不悔，是清醒地从命。死亡来临时有一个仪式，灰和土都好，看往日轻轻地蒸发，但同时明白，有什么东西沉沉地还在。不求还在现实中，但愿还在美丽的位置上。于爱者而言，爱情怎么会是悲剧？对春天而言，秋天是它的悲剧吗？</p></div></body>
</html>
运行结果
边框：column-rule
概念：column-rule属性定义列与列之间的边框样式
语法：
column-rule:width style color;
属性值
| 属性值 | 说明 |
|---|---|
| width | 定义边框的宽度 |
| style | 定义边框的样式 |
| color | 定义边框的颜色 |
column-rule属性是一个复合属性，由3个子属性组成。
- column-rule-width：定义边框的宽度。
- column-rule-style：定义边框的样式。
- column-rule-color：定义边框的颜色。
说明：用法跟border属性基本上是一样的
实例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>边框</title><style>div{width:400px;padding:10px;border:1px solid orange;/* 定义列数目为2*/column-count:2;/* 定义列间距为100px */column-gap:100px;/* 定义列之间的边框样式 */column-rule:1px solid blueviolet;}h1{height:60px;line-height:60px;text-align:center;background-color:rgba(83,199,86,0.6);}p{font-family:"仿宋";font: size:16px;}</style></head><body><div><h1>顾城</h1><p>命运不是风来回吹，命运是大地，走到哪里你都在命中。从叶到花，或从花到叶，于科研是一个过程，而于生命自身则永远只在此刻。花和叶都是一种记忆方式，果子同时也是种子。生命是闪耀的此刻，不是过程，就像芳香不需要道路一样。诗是树叶，比秋天短，比世界长。</p><h1>史铁生</h1><p>于是得有一种道路，你愿2意为之生也愿意为之死，愿意为之累，愿意在它的引力下耗尽生命。不是强言不悔，是清醒地从命。死亡来临时有一个仪式，灰和土都好，看往日轻轻地蒸发，但同时明白，有什么东西沉沉地还在。不求还在现实中，但愿还在美丽的位置上。于爱者而言，爱情怎么会是悲剧？对春天而言，秋天是它的悲剧吗？</p></div></body>
</html>
运行结果
跨列：column-span
概念：column-span属性来实现多列布局的跨列效果
语法：
column-span:none|all;
属性值
| 属性值 | 说明 |
|---|---|
| none | 表示元素不跨多个列。 |
| all | 表示元素横跨所有列。元素出现之前，出现在元素之前的正常流中的内容在所有列之间自动平衡。该元素建立一个新的区块格式化上下文。 |
实例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>跨列</title><style>div{width:400px;padding:10px;border:1px solid orange;column-count:2;column-gap:100px;column-rule:1px solid blueviolet;}h1{height:60px;line-height:60px;text-align:center;background-color:rgba(83,199,86,0.6);/* 该元素横跨所有列 */column-span:all;}p{font-family:"仿宋";font: size:16px;}</style></head><body><div><h1>顾城</h1><p>命运不是风来回吹，命运是大地，走到哪里你都在命中。从叶到花，或从花到叶，于科研是一个过程，而于生命自身则永远只在此刻。花和叶都是一种记忆方式，果子同时也是种子。生命是闪耀的此刻，不是过程，就像芳香不需要道路一样。诗是树叶，比秋天短，比世界长。</p><h1>史铁生</h1><p>于是得有一种道路，你愿2意为之生也愿意为之死，愿意为之累，愿意在它的引力下耗尽生命。不是强言不悔，是清醒地从命。死亡来临时有一个仪式，灰和土都好，看往日轻轻地蒸发，但同时明白，有什么东西沉沉地还在。不求还在现实中，但愿还在美丽的位置上。于爱者而言，爱情怎么会是悲剧？对春天而言，秋天是它的悲剧吗？</p></div></body>
</html>
运行结果
在该实例中，column-span:all；属性使得标题h1跨越所有的列。
相关文章：
CSS3中多列布局详解
多列布局 概念：在CSS3之前，想要设计类似报纸那样的多列布局，有两种方式可以实现：一种是"浮动布局"，另一种是“定位布局”。 这两种方式都有缺点：浮动布局比较灵活，但不容易控制&…...
Xmind 网页端登录及多端同步
好久没用 Xmind 了，前几天登录网页端突然发现没办法登录了，总是跳转到 Xmind AI 页面。本以为他们不再支持网页端了，后来看提示才知道只是迁移到了新的网址，由原来的 xmind.works 现在改成了的 xmind.ai。又花费好长时间才重新登录…...
Transformer从菜鸟到新手(七)
引言 上篇文章加速推理的KV缓存技术，本文介绍让我们可以得到更好的BLEU分数的解码技术——束搜索。 束搜索 我们之前生成翻译结果的时候，使用的是最简单的贪心搜索，即每次选择概率最大的，但是每次生成都选择概率最大的并不一定…...
上海AI实验室等开源，音频、音乐统一开发工具包Amphion
上海AI实验室、香港中文大学数据科学院、深圳大数据研究院联合开源了一个名为Amphion的音频、音乐和语音生成工具包。 Amphion可帮助开发人员研究文本生成音频、音乐等与音频相关的领域，可以在一个框架内完成，以解决生成模型黑箱、代码库分散、缺少评估…...
加快网络安全事件响应速度的6个步骤
现代安全工具不断提高保护组织网络和端点免受网络犯罪分子侵害的能力。但坏人偶尔还是会找到办法进来。 安全团队必须能够阻止威胁并尽快恢复正常运行。这就是为什么这些团队不仅必须拥有正确的工具，而且还要了解如何有效地应对事件。可以自定义事件响应模板等资源…...
Docker 镜像的详解及创建（Dockerfile详解）
目录 镜像加载的原理 联合文件系统（UnionFS） 镜像结构的分层 Dockerfile Dockerfile结构 dockerfile常用命令 Dockerfile 编写规范 docker创建镜像的方法 基于现有镜像创建 示例： 基于本地模版创建 示例 基于Dockerfile 创建 示…...
JDBC事务
1.事务 数据库事务是一组数据库操作，它们被视为一个单一的逻辑工作单元，要么全部成功执行，要么全部回滚（撤销）到事务开始前的状态。事务是确保数据库数据一致性、完整性和可靠性的关键机制之一。 简单来说࿰…...
协方差矩阵自适应调整的进化策略(CMA-ES)
关于CMA-ES，其中 CMA 为协方差矩阵自适应(Covariance Matrix Adaptation)，而进化策略（Evolution strategies, ES）是一种无梯度随机优化算法。CMA-ES 是一种随机或随机化方法，用于非线性、非凸函数的实参数（…...
gitee完整使用教程，创建项目并上传
目录 一 什么是gitee 二 安装Git 三 登录gitee，生成密钥 四 配置SSH密钥 五 创建项目 六 克隆仓库到本地 七 关联本地工程到远程仓库 八 添加文件 九 异常处理 十 删除仓储 十一 git常用命令 一 什么是gitee gitee是开源中国推出的基于git的代码托管服务…...
如何使用ActiveMQ详细讲解
ActiveMQ 是一款流行的消息中间件，支持多种通信协议和消息模式，包括点对点、发布/订阅、事务处理等。下面是使用 ActiveMQ 的基本步骤： 1. 下载和安装 ActiveMQ： • 前往 ActiveMQ 的官方网站（http://activemq.apach…...
【python入门】day28：记录用户登录日志
演示 代码 #-*- coding:utf-8 -*- print(记录用户登录日志----------------------------) import time def show_info():print(输入提示数字,执行相应操作:0退出,1查看登录日志) def write_logininfo(username):#----------记录日志with open(log.txt,a,encodingutf-8)as file…...
sqlserver2012 跨服务器查询
在 SQL Server 2012 中，跨服务器查询可以通过链接服务器来实现。以下是执行跨服务器查询的步骤： 创建链接服务器： 首先，你需要在 SQL Server 2012 上创建一个链接服务器对象。可以使用系统存储过程 sp_addlinkedserver 来完成这一…...
无人机视角、多模态、模型剪枝、国产AI芯片部署
无人机视角、多模态、模型剪枝、国产AI芯片部署是当前无人机技术领域的重要研究方向，其原理和应用价值在以下几个方面进行详细讲述。 一、无人机视角：无人机视角是指在无人机上搭载摄像头等设备，通过航拍图像获取环境信息，并进行…...
DaisyDisk for mac 中文激活版 可视化磁盘清理工具
DaisyDisk 是一款专为 Mac 设计的磁盘空间分析工具。它以直观、图形化的方式展示硬盘使用情况，帮助用户迅速找到占用空间大的文件和文件夹。通过扫描磁盘，DaisyDisk 生成彩色的扇形图表，每个扇区代表一个文件或文件夹，大小直观反映…...
Linux debain12 安装phpredis和mysql扩展
在php和mysql安装好之后，直接执行以下命令，就可以安装php的mysql相关扩展 apt-get install php-mysql //安装php与mysql的组件 安装phpredis扩展 首页安装redis sudo apt install redis-server 检查Redis服务是否在您的Debian 12上成功安装&#x…...
七、Qt 信号和槽
在QT4以上的版本，在窗体上用可以通过选中控件，然后点击鼠标右键单击按钮，选择“转到槽”。可以自动创建信号和槽。 选择clicked(),并点击 ok Qt Creator会给头文件和代码文件自动添加 这个按钮的单击事件（信号和槽）。 …...
C盘满了，我用什么思路清理？
20240115 上周六同事传了一个很大的虚拟机给我，C盘就红了 虽然是飞秋选错了存储文件的路径，但后来忘了，就开始毫无目的删除文件，过程中会有没有权限删除的，这样还是没有改善。 咨询了公司IT技术人员， 告…...
Simulink简介
Simulink 是一个模块图环境，用于多域仿真以及基于模型的设计。它支持系统级设计、仿真、自动代码生成以及嵌入式系统的连续测试和验证。Simulink 提供图形编辑器、可自定义的模块库以及求解器，能够进行动态系统建模和仿真。Simulink 与 MATLAB 相集成&am…...
学习Vue封装的过渡与动画总结
今天学习了Vue封装的过渡与动画，接下来说一下Vue是如何实现的，首先原生的方法是在style元素中给指定元素添加过渡的过渡或动画，但Vue就不需要直接获取到需要过渡或动画的元素，而是使用一个<transition>的标签来包裹住想要过…...
vue2 pdfjs-2.8.335-dist pdf文件在线预览功能
1、首先先将 pdfjs-2.8.335-dist 文件夹从网上搜索下载，复制到public文件夹下. 2、在components下新建组件PdfViewer.vue文件 3、在el-upload 中调用 pdf-viewer 组件 4、在el-upload 中的 on-preview方法中加上对应的src路径 internalPreview(file) { //判断需要…...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手：借助大模型技术，开发能根据用户输入的主题、风格等要求，生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用，帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
装饰模式（Decorator Pattern）重构java邮件发奖系统实战
前言 现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件（System Property Definition File），用于声明和管理 Bluetooth 模块相…...
智能仓储的未来：自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”，物流的终极形态正在诞生 想象这样的场景： 凌晨3点，某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径；AI视觉系统在0.1秒内扫描包裹信息；数字孪生平台正模拟次日峰值流量压力…...
网络编程（UDP编程）
思维导图 UDP基础编程（单播） 1.流程图 服务器：短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
【 java 虚拟机知识 第一篇 】
目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...
用鸿蒙HarmonyOS5实现中国象棋小游戏的过程
下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...
【UE5 C++】通过文件对话框获取选择文件的路径
目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 ，这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器，右键点击 .uproject 文件，选择 "Generate Visual Studio project files"，重…...
Java多线程实现之Runnable接口深度解析
Java多线程实现之Runnable接口深度解析 一、Runnable接口概述1.1 接口定义1.2 与Thread类的关系1.3 使用Runnable接口的优势 二、Runnable接口的基本实现方式2.1 传统方式实现Runnable接口2.2 使用匿名内部类实现Runnable接口2.3 使用Lambda表达式实现Runnable接口 三、Runnabl…...
嵌入式面试常问问题
以下内容面向嵌入式/系统方向的初学者与面试备考者，全面梳理了以下几大板块，并在每个板块末尾列出常见的面试问答思路，帮助你既能夯实基础，又能应对面试挑战。 一、TCP/IP 协议 1.1 TCP/IP 五层模型概述 链路层（Link Layer） 包括网卡驱动、以太网、Wi‑Fi、PPP 等。负责…...