当前位置： 首页 > news >正文

CSS3中多列布局详解

news 2026/4/1 8:53:17

多列布局

概念：在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中多列布局详解

多列布局 概念&#xff1a;在CSS3之前&#xff0c;想要设计类似报纸那样的多列布局&#xff0c;有两种方式可以实现&#xff1a;一种是"浮动布局"&#xff0c;另一种是“定位布局”。 这两种方式都有缺点&#xff1a;浮动布局比较灵活&#xff0c;但不容易控制&…...

编程日记 2024/1/17 6:30:39

Xmind 网页端登录及多端同步

好久没用 Xmind 了&#xff0c;前几天登录网页端突然发现没办法登录了&#xff0c;总是跳转到 Xmind AI 页面。本以为他们不再支持网页端了&#xff0c;后来看提示才知道只是迁移到了新的网址&#xff0c;由原来的 xmind.works 现在改成了的 xmind.ai。又花费好长时间才重新登录…...

编程日记 2024/1/17 6:29:39

Transformer从菜鸟到新手(七)

引言 上篇文章加速推理的KV缓存技术&#xff0c;本文介绍让我们可以得到更好的BLEU分数的解码技术——束搜索。 束搜索 我们之前生成翻译结果的时候&#xff0c;使用的是最简单的贪心搜索&#xff0c;即每次选择概率最大的&#xff0c;但是每次生成都选择概率最大的并不一定…...

编程日记 2024/1/17 6:28:38

上海AI实验室等开源，音频、音乐统一开发工具包Amphion

上海AI实验室、香港中文大学数据科学院、深圳大数据研究院联合开源了一个名为Amphion的音频、音乐和语音生成工具包。 Amphion可帮助开发人员研究文本生成音频、音乐等与音频相关的领域&#xff0c;可以在一个框架内完成&#xff0c;以解决生成模型黑箱、代码库分散、缺少评估…...

编程日记 2024/1/17 6:27:37

加快网络安全事件响应速度的6个步骤

现代安全工具不断提高保护组织网络和端点免受网络犯罪分子侵害的能力。但坏人偶尔还是会找到办法进来。 安全团队必须能够阻止威胁并尽快恢复正常运行。这就是为什么这些团队不仅必须拥有正确的工具&#xff0c;而且还要了解如何有效地应对事件。可以自定义事件响应模板等资源…...

编程日记 2024/1/17 6:26:36

Docker 镜像的详解及创建（Dockerfile详解）

目录 镜像加载的原理 联合文件系统&#xff08;UnionFS&#xff09; 镜像结构的分层 Dockerfile Dockerfile结构 dockerfile常用命令 Dockerfile 编写规范 docker创建镜像的方法 基于现有镜像创建 示例&#xff1a; 基于本地模版创建 示例 基于Dockerfile 创建 示…...

编程日记 2024/1/17 6:25:35

JDBC事务

1.事务 数据库事务是一组数据库操作&#xff0c;它们被视为一个单一的逻辑工作单元&#xff0c;要么全部成功执行&#xff0c;要么全部回滚&#xff08;撤销&#xff09;到事务开始前的状态。事务是确保数据库数据一致性、完整性和可靠性的关键机制之一。 简单来说&#xff0…...

编程日记 2024/1/17 6:24:34

协方差矩阵自适应调整的进化策略(CMA-ES)

关于CMA-ES&#xff0c;其中 CMA 为协方差矩阵自适应(Covariance Matrix Adaptation)&#xff0c;而进化策略&#xff08;Evolution strategies, ES&#xff09;是一种无梯度随机优化算法。CMA-ES 是一种随机或随机化方法&#xff0c;用于非线性、非凸函数的实参数&#xff08;…...

编程日记 2024/1/17 6:21:31

gitee完整使用教程，创建项目并上传

目录 一 什么是gitee 二 安装Git 三 登录gitee&#xff0c;生成密钥 四 配置SSH密钥 五 创建项目 六 克隆仓库到本地 七 关联本地工程到远程仓库 八 添加文件 九 异常处理 十 删除仓储 十一 git常用命令 一 什么是gitee gitee是开源中国推出的基于git的代码托管服务…...

编程日记 2024/1/17 6:20:30

如何使用ActiveMQ详细讲解

ActiveMQ 是一款流行的消息中间件&#xff0c;支持多种通信协议和消息模式&#xff0c;包括点对点、发布/订阅、事务处理等。下面是使用 ActiveMQ 的基本步骤&#xff1a; 1. 下载和安装 ActiveMQ&#xff1a; • 前往 ActiveMQ 的官方网站&#xff08;http://activemq.apach…...

编程日记 2024/1/17 6:19:29

【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…...

编程日记 2024/1/17 6:17:27

sqlserver2012 跨服务器查询

在 SQL Server 2012 中&#xff0c;跨服务器查询可以通过链接服务器来实现。以下是执行跨服务器查询的步骤&#xff1a; 创建链接服务器&#xff1a; 首先&#xff0c;你需要在 SQL Server 2012 上创建一个链接服务器对象。可以使用系统存储过程 sp_addlinkedserver 来完成这一…...

编程日记 2024/1/17 6:15:25

无人机视角、多模态、模型剪枝、国产AI芯片部署

无人机视角、多模态、模型剪枝、国产AI芯片部署是当前无人机技术领域的重要研究方向&#xff0c;其原理和应用价值在以下几个方面进行详细讲述。 一、无人机视角&#xff1a;无人机视角是指在无人机上搭载摄像头等设备&#xff0c;通过航拍图像获取环境信息&#xff0c;并进行…...

编程日记 2024/1/17 6:14:24

DaisyDisk for mac 中文激活版 可视化磁盘清理工具

DaisyDisk 是一款专为 Mac 设计的磁盘空间分析工具。它以直观、图形化的方式展示硬盘使用情况&#xff0c;帮助用户迅速找到占用空间大的文件和文件夹。通过扫描磁盘&#xff0c;DaisyDisk 生成彩色的扇形图表&#xff0c;每个扇区代表一个文件或文件夹&#xff0c;大小直观反映…...

编程日记 2024/1/17 6:13:23

Linux debain12 安装phpredis和mysql扩展

在php和mysql安装好之后&#xff0c;直接执行以下命令&#xff0c;就可以安装php的mysql相关扩展 apt-get install php-mysql //安装php与mysql的组件 安装phpredis扩展 首页安装redis sudo apt install redis-server 检查Redis服务是否在您的Debian 12上成功安装&#x…...

编程日记 2024/1/17 6:12:22

七、Qt 信号和槽

在QT4以上的版本&#xff0c;在窗体上用可以通过选中控件&#xff0c;然后点击鼠标右键单击按钮&#xff0c;选择“转到槽”。可以自动创建信号和槽。 选择clicked(),并点击 ok Qt Creator会给头文件和代码文件自动添加 这个按钮的单击事件&#xff08;信号和槽&#xff09;。 …...

编程日记 2024/1/17 6:10:20

C盘满了，我用什么思路清理？

20240115 上周六同事传了一个很大的虚拟机给我&#xff0c;C盘就红了 虽然是飞秋选错了存储文件的路径&#xff0c;但后来忘了&#xff0c;就开始毫无目的删除文件&#xff0c;过程中会有没有权限删除的&#xff0c;这样还是没有改善。 咨询了公司IT技术人员&#xff0c; 告…...

编程日记 2024/1/17 6:09:19

Simulink简介

Simulink 是一个模块图环境&#xff0c;用于多域仿真以及基于模型的设计。它支持系统级设计、仿真、自动代码生成以及嵌入式系统的连续测试和验证。Simulink 提供图形编辑器、可自定义的模块库以及求解器&#xff0c;能够进行动态系统建模和仿真。Simulink 与 MATLAB 相集成&am…...

编程日记 2024/1/17 6:08:18

学习Vue封装的过渡与动画总结

今天学习了Vue封装的过渡与动画&#xff0c;接下来说一下Vue是如何实现的&#xff0c;首先原生的方法是在style元素中给指定元素添加过渡的过渡或动画&#xff0c;但Vue就不需要直接获取到需要过渡或动画的元素&#xff0c;而是使用一个<transition>的标签来包裹住想要过…...

编程日记 2024/1/17 6:07:16

vue2 pdfjs-2.8.335-dist pdf文件在线预览功能

1、首先先将 pdfjs-2.8.335-dist 文件夹从网上搜索下载&#xff0c;复制到public文件夹下. 2、在components下新建组件PdfViewer.vue文件 3、在el-upload 中调用 pdf-viewer 组件 4、在el-upload 中的 on-preview方法中加上对应的src路径 internalPreview(file) { //判断需要…...

编程日记 2024/1/17 6:05:14

Tetrazine-amine HCl salt,CAS:1416711-59-5,四嗪-氨基盐酸盐的描述

Tetrazine-amine HCl salt&#xff08;四嗪-氨基盐酸盐&#xff09;是一种结合了四嗪基团和氨基盐酸盐结构的化合物&#xff0c;在化学、生物医药和材料科学等领域具有广泛应用。一、基本信息中文名称&#xff1a;四嗪-氨基盐酸盐英文名称&#xff1a;Tetrazine-amine HCl salt…...

编程新知 2026/4/1 8:28:23

Lychee-rerank-mm在音乐推荐中的创新应用

Lychee-rerank-mm在音乐推荐中的创新应用 1. 引言 你有没有遇到过这样的情况&#xff1a;在音乐平台上听到一首很喜欢的歌&#xff0c;想找类似的音乐&#xff0c;但系统推荐的歌曲却总是差强人意&#xff1f;要么封面风格完全不搭&#xff0c;要么歌词主题南辕北辙&#xff…...

编程新知 2026/4/1 7:02:35

李慕婉-仙逆-造相Z-Turbo AI核心原理科普：如何用Transformer理解并生成人类语言

李慕婉-仙逆-造相Z-Turbo AI核心原理科普&#xff1a;如何用Transformer理解并生成人类语言 你有没有想过&#xff0c;当你和“李慕婉-仙逆-造相Z-Turbo”这样的AI模型对话时&#xff0c;它到底是怎么“听懂”你的话&#xff0c;又“想”出那些回答的&#xff1f;它不像我们人…...

编程新知 2026/4/1 6:17:30

SmallThinker-3B-Preview赋能Java后端：智能客服系统数据库设计

SmallThinker-3B-Preview赋能Java后端&#xff1a;智能客服系统数据库设计 最近在做一个Java后端的智能客服项目&#xff0c;核心是要接入一个轻量级的AI模型——SmallThinker-3B-Preview。模型选好了&#xff0c;代码逻辑也搭得差不多了&#xff0c;但一到数据库设计这块&…...

编程新知 2026/4/1 5:43:05

Wan2.2-T2V-A5B实战：GitHub版本管理下的团队协作开发流程

Wan2.2-T2V-A5B实战&#xff1a;GitHub版本管理下的团队协作开发流程 你是不是也遇到过这样的场景&#xff1f;团队几个人一起开发一个基于Wan2.2-T2V-A5B的应用项目&#xff0c;代码改来改去&#xff0c;最后谁改了哪部分、为什么改、线上版本和本地版本哪个更新&#xff0c;…...

编程新知 2026/4/1 5:35:01

工业以太网双雄：从协议原理到选型落地，EtherCAT与PROFINET实战解析

1. 工业以太网的双雄之争&#xff1a;为什么选型这么难&#xff1f; 第一次接触工业以太网协议选型时&#xff0c;我盯着EtherCAT和PROFINET的参数表发呆了整整一上午。就像面对两个各有所长的武林高手&#xff0c;一个轻功了得&#xff0c;一个内力深厚&#xff0c;实在难以抉…...

编程新知 2026/4/1 5:20:56

深度解析：基于摄像头的远程生理监测工具箱rPPG-Toolbox实战指南

深度解析&#xff1a;基于摄像头的远程生理监测工具箱rPPG-Toolbox实战指南 【免费下载链接】rPPG-Toolbox rPPG-Toolbox: Deep Remote PPG Toolbox (NeurIPS 2023) 项目地址: https://gitcode.com/gh_mirrors/rp/rPPG-Toolbox 远程生理监测技术正在医疗健康领域引发革命…...

编程新知 2026/4/1 5:08:53

Pixie微型LED链式显示模块技术解析与嵌入式驱动开发

1. Pixie显示模块技术解析与嵌入式驱动开发指南Pixie 是一款面向嵌入式系统的链式可扩展微型LED点阵显示模块&#xff0c;由Lixie Labs LLC&#xff08;Connor Nishijima&#xff09;设计并开源。其核心价值在于以极小物理尺寸&#xff08;20.6mm 34.7mm&#xff09;集成双57共…...

编程新知 2026/4/1 4:52:24

python异常模拟工具类(异常生成工具类)

文章目录创建代码类使用主要是做测试的时候方便&#xff0c;创建代码类 1、新建python文件exception_mock_utils.py&#xff0c;代码为&#xff1a; import random import time from typing import Any, Optionalclass ExceptionMockUtils:"""异常模拟工具类用…...

编程新知 2026/4/1 1:43:46

Cadence Virtuoso实战：从反相器原理图到GDS版图，手把手搞定你的第一个CMOS Layout

Cadence Virtuoso实战&#xff1a;从反相器原理图到GDS版图全流程解析 在集成电路设计领域&#xff0c;从原理图到物理版图的实现是一个充满挑战又极具成就感的过程。对于初入行的工程师或微电子专业学生来说&#xff0c;掌握Cadence Virtuoso工具链的完整工作流程&#xff0c;…...

编程新知 2026/4/1 0:28:03