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

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

news 2025/12/27 6:14:22

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

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

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2025/12/22 12:48:45

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/12/17 11:50:31

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/12/22 15:10:06

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

编程新知 2025/12/4 0:13:33

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2025/12/25 14:21:52

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

编程新知 2025/12/24 22:21:28

AI语音助手的Python实现

引言 语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...

编程新知 2025/12/24 23:54:24

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步：前置条件，启用 OLE 自动化方式 1：使用 SQL 实现启用 OLE 自动化方式 2：Sql Server 2005启动OLE自动化方式 3：Sql Server 2008启动OLE自动化第 2 步：创建存储过程第 3 步：创建触发器扩展 - 如何调试？第 1 步：登录 SQL Server 2008第 2 步…...

编程新知 2025/9/11 6:56:11

在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率：以冒泡排序为例

目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码&#xff1a;冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...

编程新知 2025/12/25 8:34:18

Python环境安装与虚拟环境配置详解

本文档旨在为Python开发者提供一站式的环境安装与虚拟环境配置指南&#xff0c;适用于Windows、macOS和Linux系统。无论你是初学者还是有经验的开发者&#xff0c;都能在此找到适合自己的环境搭建方法和常见问题的解决方案。 快速开始 一分钟快速安装与虚拟环境配置 # macOS/…...

编程新知 2025/12/25 12:41:52