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

CSS“多列布局”（补充）——WEB开发系列35

news 2026/5/21 8:17:51

多列布局是一种非常常见的布局方式，适用于内容丰富的页面，如新闻网站、杂志或博客。

一、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…...

编程日记 2024/9/11 14:15:14

UI自动化测试痛点解决方案

前言 UI自动化测试可以快速、准确地执行大量的测试用例，减少人工测试所需的时间和劳动力。能够在短时间内完成多个测试用例的执行，提高测试的效率和速度。但是UI自动化有个最大的痛点。当前端界面发生变化时，往往页面元素定位也会改变&#…...

编程日记 2024/9/11 14:14:12

如何将QAD系统EDI模块无缝迁移到知行之桥？

什么是QAD系统？ QAD（Quality, Applications, Development）系统，是专为制造业设计的一款ERP软件，主要包含供应链管理、生产管理、财务和客户管理等业务功能，这家公司1979年成立于美国，目前在汽车…...

编程日记 2024/9/11 14:10:08

配置三台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…...

编程日记 2024/9/11 14:08:06

Selenium事件监听

引言你一定总是渴望从WebDriver中获得更多的日志信息，以便调试你的脚本或记录更多有关测试的信息。这里为你提供了解决方案：EventFiringWebDriver 和 WebDriverEventListener。EventFiringWebDriver 是一个类，用于包装你的WebDriver以抛出事件，而WebDriverEventListener是…...

编程日记 2024/9/11 14:07:05

视频写作入门：9个步骤开始您的视频日志并与观众建立真实的联系

视频博客（vlogging）通过视频内容帮助你独特的声音和故事被听到，这能与你的观众建立强烈而有意义的联系，从而促进你的业务发展。使用光年AI平台，你可以将业务场景无缝接入AI能力，轻松实现私域流量的增长。 …...

编程日记 2024/9/11 14:06:03

使用豆包MarsCode 编写 Node.js 全栈应用开发实践

以下是「豆包MarsCode 体验官」优秀文章，作者狼叔。欢迎更多用户使用豆包MarsCode 并分享您的产品使用心得及反馈、创意项目开发等，【有奖征集｜人人都是豆包MarsCode 测评官！】活动正在火热进行中，欢迎大家投稿参加&a…...

编程日记 2024/9/11 14:05:02

Spring Cloud全解析：熔断之Hystrix执行流程

Hystrix执行流程每次调用创建一个新的HystrixCommand，把依赖调用封装在run()方法中执行execute()/queue做同步或异步调用判断熔断器(circuit-breaker)是否打开，如果打开则执行fallback进行降级策略，如果关闭继续执行判断线程池/队列/信号量…...

编程日记 2024/9/11 14:04:01

大模型算法岗，面试百问百答，7天3个offer拿到手！

导读大模型时代很多企业都在开发自己的大模型，这直接刺激了大模型岗位的需求。本文为大家整理了大模型面试相关的知识点，希望对大家面试求职有所帮助。今天分享大模型面试相关知识点，持续更新。 1. RAG技术体系的总体思路数据预处理->…...

编程日记 2024/9/11 13:59:58

代码随想录算法day32 | 动态规划算法part05 | 完全背包，518. 零钱兑换 II， 377. 组合总和 Ⅳ，70. 爬楼梯（进阶）

完全背包理论基础本题力扣上没有原题，大家可以去卡码网第52题 (opens new window)去练习，题意是一样的。完全背包有N件物品和一个最多能背重量为W的背包。第 i 件物品的重量是 weight[i]，得到的价值是 value[i] 。每件物品都有无限个&…...

编程日记 2024/9/11 13:57:56

【Linux 从基础到进阶】自动化备份与恢复策略

自动化备份与恢复策略在 Linux 运维中，数据的安全性至关重要，自动化备份与恢复策略是保障系统和数据安全的核心环节。无论是系统配置文件、用户数据、数据库还是应用程序日志，备份和恢复都能为系统灾难恢复、数据丢失等突发情况提供可靠的解决方案。本文将介绍如何在 Ce…...

编程日记 2024/9/11 13:56:55

前端打包装包——设置镜像

1、打包失败，因为没装包，装包失败，因为装包的源错误 npm config get registry npm config set registry https://registry.npmmirror.com/npm install npm run build还是失败，因为缺少了包，在package.json文件中没有包…...

编程日记 2024/9/11 13:55:54

volatile 的作用？是否具有原子性，对编译器有什么影响？什么情况下一定要用 volatile，能否和 const 一起使用？

目录 1. volatile 的作用 2. 是否具有原子性 3. 对编译器的影响 4.volatile 的使用场景 5.volatile 和 const 的组合 1. volatile 的作用防止编译器优化：volatile 告诉编译器，变量的值可能会在程序的其他地方（如硬件中断、其他线程等&…...

编程日记 2024/9/11 13:54:53

iPhone 16分辨率,屏幕尺寸,PPI 详细数据对比 iPhone 16 Plus、iPhone 16 Pro、iPhone 16 Pro Max

史上最全iPhone 机型分辨率，屏幕尺寸，PPI详细数据！已更新到iPhone 16系列！ 点击放大查看高清图 ！...

编程日记 2024/9/11 13:53:48

FunASR搭建语音识别服务和VAD检测

搭建ASR语音识别服务（含VAD检测）教程在本文中，我将为大家详细介绍如何搭建一套基于FunASR的ASR（语音识别）服务，并集成VAD（语音活动检测）。该服务使用阿里达摩院的模型，…...

编程日记 2024/9/11 13:50:46

设计一个支持多线程写入的并发日志记录系统：C++实战指南

设计一个支持多线程写入的并发日志记录系统：C实战指南在现代软件开发中，日志记录是一个至关重要的功能，它帮助开发者调试、监控和维护系统。然而，在多线程环境中，日志记录系统需要处理多个线程同时写入日志的问题&am…...

编程日记 2024/9/11 13:46:43

使用LSTM（长短期记忆网络）模型预测股票价格的实例分析

一：LSTM与RNN的区别 LSTM（Long Short-Term Memory）是一种特殊的循环神经网络（RNN）架构。LSTM是为了解决传统RNN在处理长序列数据时遇到的梯度消失或梯度爆炸问题而设计的。在传统的RNN中，信息通过隐藏状…...

编程日记 2024/9/11 13:45:41

开源的 Windows 12 网页体验版！精美的 UI 设计、丰富流畅的动画

大家周二好呀！博主今天给小伙伴们分享一款炫酷的 Windows 12 体验版，网页效果拉满，非常值得我们去尝试！ 如果你对未来的Windows操作系统充满期待，那么这款开源的Windows 12 网页体验版绝对不容错过！这不仅…...

编程日记 2024/9/11 13:44:41

chapter14-集合——（List）——day18

目录 518-Set接口方法 518-Set接口方法...

编程日记 2024/9/11 13:43:39

Frida 脚本抓取 HttpURLConnection 请求和响应

引入 Java 类： 引入 okhttp3.OkHttpClient、okhttp3.OkHttpClient$Builder、okhttp3.Interceptor、okhttp3.ResponseBody 等类。创建自定义拦截器： 通过 Java.registerClass 创建自定义拦截器 MyInterceptor。拦截器中重写 intercept 方法&#xff0…...

编程日记 2024/9/11 13:42:38

靖江注册公司需要多少钱？2026最新费用明细与隐形消费避坑指南

对于靖江的传统小微型企业、个体工商户、夫妻店及初创公司而言，注册公司的费用多少、是否存在隐形消费，是创业初期最关心的问题。这类企业大多没有专职会计，社保参保人数通常在3人以下，注册年限多在2年内，资金预算有限…...

编程新知 2026/5/21 5:49:42

2026年大模型内容精准收录实操，企业长效流量布局核心方法论

引言：大模型正在成为企业品牌认知的新前置入口。当越来越多用户绕过搜索引擎、直接向AI提问"哪家公司更适合""某个方案值不值得选"时，企业在AI回答中的位置、语气和引用来源，已经构成真实的竞争格局。本文将从大模型内容…...

编程新知 2026/5/21 5:45:33

ARMv8-A A64内存拷贝指令优化原理与实践

1. A64内存拷贝指令概述在ARMv8-A架构的A64指令集中，内存拷贝操作被设计为一组高度优化的硬件指令，包括CPYPN、CPYMN和CPYEN三个关键指令。这些指令构成了一个完整的内存拷贝流水线，通过硬件级并行化和非临时(non-temporal)访问模式&#xff…...

编程新知 2026/5/21 5:39:31

别再自己写CNN了！用TensorFlow 2.3和MobileNetV2，15分钟搞定水果识别模型（附完整代码）

15分钟构建高精度水果识别模型：基于TensorFlow 2.3与MobileNetV2的迁移学习实战在计算机视觉领域，图像分类任务往往需要复杂的模型架构和大量训练数据。但对于大多数实际应用场景（如智能零售、农业分拣或家庭健康管理）&#xff0…...

编程新知 2026/5/21 3:02:10

华为昇腾Atlas200边缘设备开箱即用指南：从CANN环境到YOLOv8模型部署的保姆级避坑教程

华为昇腾Atlas200边缘设备实战：YOLOv8模型部署全流程避坑指南第一次拿到华为昇腾Atlas200边缘计算设备时，那种既兴奋又忐忑的心情记忆犹新。作为一款专为AI推理设计的边缘设备，Atlas200凭借其强大的算力和紧凑的体型，在智能安防…...

编程新知 2026/5/21 2:28:54

为内部ai工具平台集成taotoken实现多模型灵活切换的方案

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度为内部AI工具平台集成Taotoken实现多模型灵活切换的方案在企业内部开发AI工具平台时，一个常见的挑战是如何为不同的业…...

编程新知 2026/5/21 1:10:59

如何彻底禁用iOS过热降频：thermalmonitordDisabler终极指南

如何彻底禁用iOS过热降频：thermalmonitordDisabler终极指南【免费下载链接】thermalmonitordDisabler A tool used to disable iOS daemons. 项目地址: https://gitcode.com/gh_mirrors/th/thermalmonitordDisabler 你是否曾在游戏激战时遭遇iPhone突然卡顿…...

编程新知 2026/5/21 1:00:41