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

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

news 2026/3/27 9:52:57

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

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

OpenClaw内存优化：Qwen3-32B-Chat在16G设备运行方案

OpenClaw内存优化&#xff1a;Qwen3-32B-Chat在16G设备运行方案 1. 为什么需要内存优化&#xff1f; 去年冬天&#xff0c;当我第一次尝试在16GB内存的MacBook Pro上运行Qwen3-32B-Chat模型时&#xff0c;系统几乎立即崩溃。这让我意识到&#xff0c;想要在资源有限的设备上运…...

编程新知 2026/3/27 9:29:03

DXVK解决方案：基于Vulkan的Direct3D兼容层性能优化指南

DXVK解决方案&#xff1a;基于Vulkan的Direct3D兼容层性能优化指南 【免费下载链接】dxvk Vulkan-based implementation of D3D9, D3D10 and D3D11 for Linux / Wine 项目地址: https://gitcode.com/gh_mirrors/dx/dxvk DXVK是一个基于Vulkan的Direct3D 8/9/10/11实现层…...

编程新知 2026/3/27 9:12:50

电力电子器件全解析：从二极管到IGBT，手把手教你掌握王兆安教材核心考点

电力电子器件深度解析&#xff1a;从基础原理到高效复习策略 电力电子技术作为现代自动化与能源转换的核心学科&#xff0c;其器件特性与应用的掌握程度直接影响着工程师解决实际问题的能力。对于华南理工大学自动化专业的学生而言&#xff0c;王兆安教授的《电力电子技术》教材…...

编程新知 2026/3/27 7:09:33

从零实现手眼标定：Python+Realsense+JAKA实战与四元数、欧拉角、旋转矩阵转换详解

1. 手眼标定基础概念与实战准备 手眼标定是机器人视觉引导中的核心环节&#xff0c;简单来说就是确定相机"眼睛"和机械臂"手"之间的相对位置关系。想象一下&#xff0c;当你闭着眼睛摸鼻子时&#xff0c;大脑需要知道手和鼻子的相对位置——机器人系统同样…...

编程新知 2026/3/27 6:37:17

YOLOv5实战：如何用Inner-IoU提升小目标检测效果（附完整代码）

YOLOv5实战&#xff1a;用Inner-IoU解决小目标检测痛点的工程指南 无人机镜头下的蚂蚁、CT扫描中的微小结节、卫星图像里的车辆——当目标尺寸小于3232像素时&#xff0c;传统检测器的性能往往会断崖式下跌。我们团队在医疗影像分析项目中就曾遇到这样的困境&#xff1a;常规Io…...

编程新知 2026/3/27 5:55:00

基于springboot运动服装销售系统设计与开发(源码+精品论文+答辩PPT等资料)

博主介绍&#xff1a;CSDN毕设辅导第一人、靠谱第一人、全网粉丝50W,csdn特邀作者、博客专家、腾讯云社区合作讲师、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交…...

编程新知 2026/3/27 5:38:55

Llama-3.2V-11B-cot镜像免配置：内置模型加载进度条与超时重试机制

Llama-3.2V-11B-cot镜像免配置&#xff1a;内置模型加载进度条与超时重试机制 1. 项目概述 Llama-3.2V-11B-cot是基于Meta Llama-3.2V-11B-cot多模态大模型开发的高性能视觉推理工具&#xff0c;专为双卡4090环境深度优化。这个工具解决了传统大模型部署中的多个痛点&#xf…...

编程新知 2026/3/27 4:56:21

告别拉伸变形！保姆级教程：为你的Unity Windows应用添加自定义窗口比例限制器

Unity Windows应用窗口比例锁定全攻略&#xff1a;从原理到避坑指南 你是否遇到过这样的尴尬场景——精心设计的UI在用户随意拉伸窗口后变得面目全非&#xff1f;作为Unity开发者&#xff0c;我们常常需要为Windows平台构建专业级应用&#xff0c;而窗口比例控制正是提升用户体…...

编程新知 2026/3/27 4:52:14

微信JS-SDK分享失败？深度解析“offline verifying”权限验证错误与高效排查指南

还在为微信网页自定义分享功能频繁遭遇“updateAppMessageShareData:fail, the permission value is offline verifying”而头疼&#xff1f;本文将从公众号认证、JS-SDK权限、域名绑定、网络、缓存及API版本六大维度&#xff0c;为您深度剖析此错误成因&#xff0c;并提供一套…...

编程新知 2026/3/27 4:40:01

告别丑曲线！PPT波浪线绘制保姆级教程（含压缩技巧）

告别丑曲线&#xff01;PPT波浪线绘制保姆级教程&#xff08;含压缩技巧&#xff09; 在商务演示、学术报告或品牌提案中&#xff0c;一条流畅的波浪线往往能成为视觉焦点——它既能引导观众视线&#xff0c;又能传递动态趋势。但PPT自带的形状库中&#xff0c;那些生硬的预设曲…...

编程新知 2026/3/27 3:45:30