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

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

news 2026/2/9 19:14:37

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

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

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2026/2/8 20:42:55

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2026/2/6 11:05:22

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/11/18 21:31:41

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2026/1/31 12:52:15

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

编程新知 2026/1/29 3:55:23

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

编程新知 2025/9/12 0:57:34

深入浅出Diffusion模型：从原理到实践的全方位教程

I. 引言&#xff1a;生成式AI的黎明 – Diffusion模型是什么&#xff1f; 近年来&#xff0c;生成式人工智能&#xff08;Generative AI&#xff09;领域取得了爆炸性的进展&#xff0c;模型能够根据简单的文本提示创作出逼真的图像、连贯的文本&#xff0c;乃至更多令人惊叹的…...

编程新知 2025/9/12 5:25:46

写一个shell脚本，把局域网内，把能ping通的IP和不能ping通的IP分类，并保存到两个文本文件里

写一个shell脚本&#xff0c;把局域网内&#xff0c;把能ping通的IP和不能ping通的IP分类&#xff0c;并保存到两个文本文件里 脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...

编程新知 2025/11/23 13:02:26

【java】【服务器】线程上下文丢失 是指什么

目录 ■前言 ■正文开始 线程上下文的核心组成部分 为什么会出现上下文丢失&#xff1f; 直观示例说明 为什么上下文如此重要&#xff1f; 解决上下文丢失的关键 总结 ■如果我想在servlet中使用线程&#xff0c;代码应该如何实现 推荐方案&#xff1a;使用 ManagedE…...

编程新知 2025/10/1 5:07:03

鸿蒙Navigation路由导航-基本使用介绍

1. Navigation介绍 Navigation组件是路由导航的根视图容器&#xff0c;一般作为Page页面的根容器使用&#xff0c;其内部默认包含了标题栏、内容区和工具栏&#xff0c;其中内容区默认首页显示导航内容&#xff08;Navigation的子组件&#xff09;或非首页显示&#xff08;Nav…...

编程新知 2026/2/4 12:37:04