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

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

news 2025/7/10 7:19:28

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

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

多列布局是一种非常常见的布局方式&#xff0c;适用于内容丰富的页面&#xff0c;如新闻网站、杂志或博客。 一、CSS多列布局概述 CSS多列布局允许我们将内容分成多个垂直列&#xff0c;使页面布局更加灵活和多样化。多列布局的主要属性包括 ​​column-count​​、​​column…...

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

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

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

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

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

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

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

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

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

Selenium事件监听

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Frida 脚本抓取 HttpURLConnection 请求和响应

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

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

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2025/7/7 16:31:37

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2025/7/8 22:45:33

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2025/7/9 22:32:21

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2025/7/6 20:49:39

Linux安全加固：从攻防视角构建系统免疫

Linux安全加固：从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言：攻防对抗的新纪元 在日益复杂的网络威胁环境中，Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示，高级持续性威胁（APT）攻击同比增长65%，平均入侵停留时间缩短至48小时。本章将从…...

编程新知 2025/7/8 20:13:31

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了&#xff0c;很多小伙伴想体验鸿蒙电脑版操作系统&#xff0c;可惜&#xff0c;鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机&#xff0c;来体验大家心心念念的鸿蒙系统啦&#xff01;注意&#xff1a;虚拟…...

编程新知 2025/7/5 18:25:35

python打卡第47天

昨天代码中注意力热图的部分顺移至今天 知识点回顾&#xff1a; 热力图 作业&#xff1a;对比不同卷积层热图可视化的结果 def visualize_attention_map(model, test_loader, device, class_names, num_samples3):"""可视化模型的注意力热力图&#xff0c;展示模…...

编程新知 2025/7/8 14:19:26

【版本控制】GitHub Desktop 入门教程与开源协作全流程解析

目录 0 引言1 GitHub Desktop 入门教程1.1 安装与基础配置1.2 核心功能使用指南仓库管理日常开发流程分支管理 2 GitHub 开源协作流程详解2.1 Fork & Pull Request 模型2.2 完整协作流程步骤步骤 1: Fork&#xff08;创建个人副本&#xff09;步骤 2: Clone&#xff08;克隆…...

编程新知 2025/7/9 5:16:56

虚幻基础：角色旋转

能帮到你的话&#xff0c;就给个赞吧 &#x1f618; 文章目录 移动组件使用控制器所需旋转&#xff1a;组件 使用 控制器旋转将旋转朝向运动&#xff1a;组件 使用 移动方向旋转 控制器旋转和移动旋转 缺点移动旋转&#xff1a;必须移动才能旋转&#xff0c;不移动不旋转控制器…...

编程新知 2025/7/6 0:15:33

免费批量Markdown转Word工具

免费批量Markdown转Word工具 一款简单易用的批量Markdown文档转换工具&#xff0c;支持将多个Markdown文件一键转换为Word文档。完全免费&#xff0c;无需安装&#xff0c;解压即用&#xff01; 官方网站 访问官方展示页面了解更多信息&#xff1a;http://mutou888.com/pro…...

编程新知 2025/7/6 0:25:14