CSS“多列布局”（补充）——WEB开发系列35
多列布局是一种非常常见的布局方式，适用于内容丰富的页面，如新闻网站、杂志或博客。
一、CSS多列布局概述
CSS多列布局允许我们将内容分成多个垂直列，使页面布局更加灵活和多样化。多列布局的主要属性包括 column-count、column-width 和 column-gap，这些属性可以单独或结合使用，以实现所需的列布局效果。
多列布局的基本属性
-
column-count：指定列的数量。例如，column-count: 3; 表示将内容分为三列。 -
column-width：指定列的最小宽度。浏览器会根据这个宽度自动调整列数，以适应容器的宽度。 -
column-gap：指定列与列之间的间距。可以使用像素（px）、百分比（%）等单位。
二、创建一个简单的三列布局
让我们从一个简单的三列布局示例开始。假设我们有一个包含大量文本的容器，我们希望将这些文本分成三列显示。
基本的三列布局示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三列布局示例</title><style>.container {column-count: 3;column-gap: 20px;padding: 20px;background-color: #f0f0f0;max-width: 800px;margin: 0 auto;}.container p {margin: 0;line-height: 1.6;}</style>
</head>
<body><div class="container"><p>在书中看过一个故事。有只兔子腹部不小心被荆棘划伤，一下子就流血了。痛苦之下，它龇牙咧嘴地呻吟着。有几只路过的动物听到了，就走过来，一边同情地望着，一边安慰它。看到自己这么受重视，兔子内心非常享受。为了吸引更多的关注，它就放开嗓子，更加卖力地惨叫起来。果然围过来的动物越来越多，兔子更兴奋了，甚至还把伤口扒开，主动展示给别的动物看。结果由于没及时处理，没过一会儿，兔子就失血过多死掉了。</p><p>现实中有很多像兔子那样的人，在遭遇伤痛后，到处吆喝卖惨，最终导致悲惨的结局。</p><p>作家傅菲说，把伤口一次次撕开给别人看，其实是对自己的折磨。面对人生的种种不幸，懂得把伤痛藏起来，默默承担，才能疗愈自己，扭转命运。人生在世，永远不要兜售自己的苦难。</p></div>
</body>
</html>
示例中我们使用 column-count 属性将容器的内容分为三列，使用 column-gap 属性设置列与列之间的间距为20px。你可以看到，文本会自动分成三列，并在列之间留有间距。
三、为多列布局添加样式
除了基本的列设置，我们还可以通过CSS为多列布局添加更多样式，使布局更具吸引力。
为多列布局添加边框和背景色
我们可以为每列添加不同的背景色和边框，使布局更加生动有趣。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>样式化的三列布局示例</title><style>.container {column-count: 3;column-gap: 20px;padding: 20px;background-color: #f0f0f0;max-width: 800px;margin: 0 auto;}.container p {margin: 0;line-height: 1.6;padding: 10px;background-color: #fff;border: 1px solid #ddd;border-radius: 4px;}.container p:nth-child(odd) {background-color: #e0f7fa;}.container p:nth-child(even) {background-color: #f1f8e9;}</style>
</head>
<body><div class="container"><p>在书中看过一个故事。有只兔子腹部不小心被荆棘划伤，一下子就流血了。痛苦之下，它龇牙咧嘴地呻吟着。有几只路过的动物听到了，就走过来，一边同情地望着，一边安慰它。看到自己这么受重视，兔子内心非常享受。为了吸引更多的关注，它就放开嗓子，更加卖力地惨叫起来。果然围过来的动物越来越多，兔子更兴奋了，甚至还把伤口扒开，主动展示给别的动物看。结果由于没及时处理，没过一会儿，兔子就失血过多死掉了。</p><p>现实中有很多像兔子那样的人，在遭遇伤痛后，到处吆喝卖惨，最终导致悲惨的结局。</p><p>作家傅菲说，把伤口一次次撕开给别人看，其实是对自己的折磨。面对人生的种种不幸，懂得把伤痛藏起来，默默承担，才能疗愈自己，扭转命运。人生在世，永远不要兜售自己的苦难。</p></div>
</body>
</html>
此示例我们为每个段落添加了边框、背景色和圆角边框，并使用 nth-child 选择器为奇数和偶数的段落分别设置不同的背景色。这样可以使每列的内容更加突出。
四、处理列与内容折断
在实际应用中，我们可能希望控制列内的内容如何折断，以确保布局的整洁性。CSS提供了 break-inside 属性来处理列与内容的折断问题。
使用 break-inside 属性
break-inside 属性用于控制元素在多列布局中的折断行为。常见的值包括：
-
auto：默认值，允许内容在列中折断。 -
avoid：尽量避免在列之间折断，适用于较大的块元素，如图片或广告。 -
avoid-page：尽量避免在页面之间折断，通常用于分页内容。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>避免折断示例</title><style>.container {column-count: 3;column-gap: 20px;padding: 20px;max-width: 800px;margin: 0 auto;}.container p {margin: 0;line-height: 1.6;break-inside: avoid;background-color: #e0f7fa;padding: 10px;border: 1px solid #ddd;border-radius: 4px;}.container img {max-width: 100%;height: auto;display: block;margin: 10px 0;}</style>
</head>
<body><div class="container"><img src="example.jpg" alt="示例图片"><p>在书中看过一个故事。有只兔子腹部不小心被荆棘划伤，一下子就流血了。痛苦之下，它龇牙咧嘴地呻吟着。有几只路过的动物听到了，就走过来，一边同情地望着，一边安慰它。看到自己这么受重视，兔子内心非常享受。为了吸引更多的关注，它就放开嗓子，更加卖力地惨叫起来。果然围过来的动物越来越多，兔子更兴奋了，甚至还把伤口扒开，主动展示给别的动物看。结果由于没及时处理，没过一会儿，兔子就失血过多死掉了。</p><p>现实中有很多像兔子那样的人，在遭遇伤痛后，到处吆喝卖惨，最终导致悲惨的结局。</p><p>作家傅菲说，把伤口一次次撕开给别人看，其实是对自己的折磨。面对人生的种种不幸，懂得把伤痛藏起来，默默承担，才能疗愈自己，扭转命运。人生在世，永远不要兜售自己的苦难。</p></div>
</body>
</html>
break-inside: avoid; 确保段落不会被分割到不同的列中。注意，break-inside 的效果可能会因浏览器支持情况而有所不同。
五、高级应用和布局技巧
创建响应式多列布局
在响应式设计中，我们可以使用媒体查询来调整多列布局，以适应不同的屏幕尺寸。
示例：响应式三列布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式三列布局示例</title><style>.container {column-count: 3;column-gap: 20px;padding: 20px;max-width: 800px;margin: 0 auto;}.container p {margin: 0;line-height: 1.6;background-color: #e0f7fa;padding: 10px;border: 1px solid #ddd;border-radius: 4px;}@media (max-width: 800px) {.container {column-count: 2;}}@media (max-width: 500px) {.container {column-count: 1;}}</style>
</head>
<body><div class="container"><p>在书中看过一个故事。有只兔子腹部不小心被荆棘划伤，一下子就流血了。痛苦之下，它龇牙咧嘴地呻吟着。有几只路过的动物听到了，就走过来，一边同情地望着，一边安慰它。看到自己这么受重视，兔子内心非常享受。为了吸引更多的关注，它就放开嗓子，更加卖力地惨叫起来。果然围过来的动物越来越多，兔子更兴奋了，甚至还把伤口扒开，主动展示给别的动物看。结果由于没及时处理，没过一会儿，兔子就失血过多死掉了。</p><p>现实中有很多像兔子那样的人，在遭遇伤痛后，到处吆喝卖惨，最终导致悲惨的结局。</p><p>作家傅菲说，把伤口一次次撕开给别人看，其实是对自己的折磨。面对人生的种种不幸，懂得把伤痛藏起来，默默承担，才能疗愈自己，扭转命运。人生在世，永远不要兜售自己的苦难。</p></div>
</body>
</html>
示例中使用媒体查询来根据屏幕宽度调整列数。当屏幕宽度小于800px时，列数变为2列；当屏幕宽度小于500px时，列数变为1列。这样可以确保布局在不同设备上都能良好展示。
多列布局与浮动元素结合使用
在某些复杂布局中，我们可能需要将多列布局与浮动元素结合使用。例如，将一个多列布局的容器与浮动的图片结合使用。
示例：多列布局与浮动元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多列布局与浮动元素示例</title><style>.container {column-count: 3;column-gap: 20px;padding: 20px;max-width: 800px;margin: 0 auto;}.container p {margin: 0;line-height: 1.6;background-color: #e0f7fa;padding: 10px;border: 1px solid #ddd;border-radius: 4px;}.container img {float: left;width: 30%;margin-right: 10px;margin-bottom: 10px;}</style>
</head>
<body><div class="container"><img src="example.png" alt="示例图片1"> <p>在书中看过一个故事。有只兔子腹部不小心被荆棘划伤，一下子就流血了。痛苦之下，它龇牙咧嘴地呻吟着。有几只路过的动物听到了，就走过来，一边同情地望着，一边安慰它。看到自己这么受重视，兔子内心非常享受。为了吸引更多的关注，它就放开嗓子，更加卖力地惨叫起来。果然围过来的动物越来越多，兔子更兴奋了，甚至还把伤口扒开，主动展示给别的动物看。结果由于没及时处理，没过一会儿，兔子就失血过多死掉了。</p><img src="example2.png" alt="示例图片2"><p>现实中有很多像兔子那样的人，在遭遇伤痛后，到处吆喝卖惨，最终导致悲惨的结局。</p><img src="example3." alt="示例图片3"><p>作家傅菲说，把伤口一次次撕开给别人看，其实是对自己的折磨。面对人生的种种不幸，懂得把伤痛藏起来，默默承担，才能疗愈自己，扭转命运。人生在世，永远不要兜售自己的苦难。</p></div>
</body>
</html>
将图片设置为浮动，图片会在多列布局中和文本内容混排。浮动的图片不会影响列布局的结构，但会在列内呈现。
相关文章：
CSS“多列布局”（补充）——WEB开发系列35
多列布局是一种非常常见的布局方式，适用于内容丰富的页面，如新闻网站、杂志或博客。 一、CSS多列布局概述 CSS多列布局允许我们将内容分成多个垂直列，使页面布局更加灵活和多样化。多列布局的主要属性包括 column-count、column…...
UI自动化测试痛点解决方案
前言 UI自动化测试可以快速、准确地执行大量的测试用例，减少人工测试所需的时间和劳动力。能够在短时间内完成多个测试用例的执行，提高测试的效率和速度。但是UI自动化有个最大的痛点。当前端界面发生变化时，往往页面元素定位也会改变&#…...
如何将QAD系统EDI模块无缝迁移到知行之桥？
什么是QAD系统？ QAD（Quality, Applications, Development）系统，是专为制造业设计的一款ERP软件，主要包含供应链管理、生产管理、财务和客户管理等业务功能，这家公司1979年成立于美国，目前在汽车…...
Linux学习-ELK(一)
配置三台elasticsearch服务器 安装包 elasticsearch.j2 报错 #---执行rsync命令报以下错误 [rootes1 ~]# rsync -av /etc/hosts 192.168.29.172:/etc/hosts root192.168.29.172s password: bash: rsync: 未找到命令 rsync: connection unexpectedly closed (0 bytes receive…...
Selenium事件监听
引言 你一定总是渴望从WebDriver中获得更多的日志信息，以便调试你的脚本或记录更多有关测试的信息。这里为你提供了解决方案：EventFiringWebDriver 和 WebDriverEventListener。EventFiringWebDriver 是一个类，用于包装你的WebDriver以抛出事件，而WebDriverEventListener是…...
视频写作入门：9个步骤开始您的视频日志并与观众建立真实的联系
视频博客（vlogging）通过视频内容帮助你独特的声音和故事被听到，这能与你的观众建立强烈而有意义的联系，从而促进你的业务发展。使用光年AI平台，你可以将业务场景无缝接入AI能力，轻松实现私域流量的增长。 …...
使用豆包MarsCode 编写 Node.js 全栈应用开发实践
以下是「豆包MarsCode 体验官」优秀文章，作者狼叔。 欢迎更多用户使用豆包MarsCode 并分享您的产品使用心得及反馈、创意项目开发等，【有奖征集｜人人都是豆包MarsCode 测评官！】活动正在火热进行中，欢迎大家投稿参加&a…...
Spring Cloud全解析：熔断之Hystrix执行流程
Hystrix执行流程 每次调用创建一个新的HystrixCommand，把依赖调用封装在run()方法中执行execute()/queue做同步或异步调用判断熔断器(circuit-breaker)是否打开，如果打开则执行fallback进行降级策略，如果关闭继续执行判断线程池/队列/信号量…...
大模型算法岗，面试百问百答，7天3个offer拿到手！
导读 大模型时代很多企业都在开发自己的大模型，这直接刺激了大模型岗位的需求。本文为大家整理了大模型面试相关的知识点，希望对大家面试求职有所帮助。 今天分享大模型面试相关知识点，持续更新。 1. RAG技术体系的总体思路 数据预处理->…...
代码随想录算法day32 | 动态规划算法part05 | 完全背包，518. 零钱兑换 II， 377. 组合总和 Ⅳ，70. 爬楼梯 （进阶）
完全背包理论基础 本题力扣上没有原题，大家可以去卡码网第52题 (opens new window)去练习，题意是一样的。 完全背包 有N件物品和一个最多能背重量为W的背包。第 i 件物品的重量是 weight[i]，得到的价值是 value[i] 。每件物品都有无限个&…...
【Linux 从基础到进阶】自动化备份与恢复策略
自动化备份与恢复策略 在 Linux 运维中，数据的安全性至关重要，自动化备份与恢复策略是保障系统和数据安全的核心环节。无论是系统配置文件、用户数据、数据库还是应用程序日志，备份和恢复都能为系统灾难恢复、数据丢失等突发情况提供可靠的解决方案。 本文将介绍如何在 Ce…...
前端打包装包——设置镜像
1、打包失败，因为没装包，装包失败，因为装包的源错误 npm config get registry npm config set registry https://registry.npmmirror.com/npm install npm run build还是失败，因为缺少了包，在package.json文件中没有包…...
volatile 的作用？是否具有原子性，对编译器有什么影响？什么情况下一定要用 volatile， 能否和 const 一起使用？
目录 1. volatile 的作用 2. 是否具有原子性 3. 对编译器的影响 4.volatile 的使用场景 5.volatile 和 const 的组合 1. volatile 的作用 防止编译器优化：volatile 告诉编译器，变量的值可能会在程序的其他地方（如硬件中断、其他线程等&…...
iPhone 16分辨率,屏幕尺寸,PPI 详细数据对比 iPhone 16 Plus、iPhone 16 Pro、iPhone 16 Pro Max
史上最全iPhone 机型分辨率，屏幕尺寸，PPI详细数据！已更新到iPhone 16系列！ 点击放大查看高清图 ！...
FunASR搭建语音识别服务和VAD检测
搭建ASR语音识别服务（含VAD检测）教程 在本文中，我将为大家详细介绍如何搭建一套基于FunASR的ASR（语音识别）服务，并集成VAD（语音活动检测）。该服务使用阿里达摩院的模型，…...
设计一个支持多线程写入的并发日志记录系统：C++实战指南
设计一个支持多线程写入的并发日志记录系统：C实战指南 在现代软件开发中，日志记录是一个至关重要的功能，它帮助开发者调试、监控和维护系统。然而，在多线程环境中，日志记录系统需要处理多个线程同时写入日志的问题&am…...
使用LSTM（长短期记忆网络）模型预测股票价格的实例分析
一：LSTM与RNN的区别 LSTM（Long Short-Term Memory）是一种特殊的循环神经网络（RNN）架构。LSTM是为了解决传统RNN在处理长序列数据时遇到的梯度消失或梯度爆炸问题而设计的。 在传统的RNN中，信息通过隐藏状…...
开源的 Windows 12 网页体验版！精美的 UI 设计、丰富流畅的动画
大家周二好呀！博主今天给小伙伴们分享一款炫酷的 Windows 12 体验版，网页效果拉满，非常值得我们去尝试！ 如果你对未来的Windows操作系统充满期待，那么这款开源的Windows 12 网页体验版绝对不容错过！这不仅…...
chapter14-集合——（List）——day18
目录 518-Set接口方法 518-Set接口方法...
Frida 脚本抓取 HttpURLConnection 请求和响应
引入 Java 类： 引入 okhttp3.OkHttpClient、okhttp3.OkHttpClient$Builder、okhttp3.Interceptor、okhttp3.ResponseBody 等类。 创建自定义拦截器： 通过 Java.registerClass 创建自定义拦截器 MyInterceptor。拦截器中重写 intercept 方法࿰…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理：…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应，这是一种非线性光学现象，主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场，对材料产生非线性响应，可能…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞！！！ 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用，因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型（VLMs）在字幕生成方面…...
Psychopy音频的使用
Psychopy音频的使用 本文主要解决以下问题： 指定音频引擎与设备；播放音频文件 本文所使用的环境： Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...
Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）
引言 在人工智能飞速发展的今天，大语言模型（Large Language Models, LLMs）已成为技术领域的焦点。从智能写作到代码生成，LLM 的应用场景不断扩展，深刻改变了我们的工作和生活方式。然而，理解这些模型的内部…...
省略号和可变参数模板
本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...
给网站添加live2d看板娘
给网站添加live2d看板娘 参考文献： stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下，文章也主…...
go 里面的指针
指针 在 Go 中，指针（pointer）是一个变量的内存地址，就像 C 语言那样： a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10，通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...
git: early EOF
macOS报错： Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...
热烈祝贺埃文科技正式加入可信数据空间发展联盟
2025年4月29日，在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上，可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞，强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...