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

CSS分栏布局

news 来源：原创 2025/8/21 18:42:05

分栏布局将区域划分为若干垂直的栏，子元素放置到栏中，填满一个后再填充下一个。如果设置了 column-count 栏数量或 column-width 栏宽度，元素就成为分栏容器。需要注意， column-width 实际上是最小栏宽度。浏览器使用这个值计算栏的数量，如果还有额外的空间，浏览器会增加栏的实际宽度。

如果内容不能填满所有栏，可以使用 column-fill 属性，将内容优先填满靠左侧的栏，或者平均分配到每个栏中。

代码1 column-fill属性

column-fill: auto;      /* 内容优先填充靠左侧的栏。 */
column-fill: balance;   /* 内容平均分配到每个栏中。 */

各栏之间的距离通过 column-gap 属性控制。

代码2 column-gap属性

column-gap: 8px;
column-gap: 10%;

栏与栏之间存在一条界线，和边框、轮廓一样，它也有3个样式属性和属性简写：

代码3 column-rule-*

column-rule-color: red;      /* 界线色彩。 */
column-rule-style: dotted;   /* 界线风格。 */
column-rule-width: 12px;     /* 界线宽度。 */
column-rule: solid 6px blue; /* 属性简写。 */

如果希望分栏容器中的某个子元素跨越所有的栏，可以将子元素的 column-span 属性设置为 all 。

CSS为分栏属性提供了简写：

代码4 columns简写

columns: 20em;       /* column-width: 20em; */
columns: 2;          /* column-count: 2; */
columns: 2 auto;     /* column-count: 2; column-width: auto; */
columns: auto 12em;  /* column-count: auto; column-width: 12em; */

CSS分栏布局

分栏布局将区域划分为若干垂直的栏，子元素放置到栏中，填满一个后再填充下一个。如果设置了 column-count 栏数量或 column-width 栏宽度，元素就成为分栏容器。需要注意， column-width 实际上是最小栏宽度。浏览器使用这个值计算栏…...

编程日记 2025/8/21 18:42:05

通过 ModernBERT 实现零样本分类的性能提升

文本分类是机器学习中最基础的任务之一，拥有悠久的研究历史和深远的实用价值。更重要的是，它是许多实际项目中不可或缺的组成部分，从搜索引擎到生物医学研究都离不开它。文本分类方法被广泛应用于科学论文分类、用户工单分类、社交媒体情感分…...

编程日记 2025/8/19 6:11:18

【AI】Ubuntu 22.04 4060Ti 16G vllm-api部署Qwen3-8B-FP8

下载模型 # 非常重要，否则容易不兼容报错 pip install modelscope -U cd /data/ai/models modelscope download --model Qwen/Qwen3-8B-FP8 --local_dir ./Qwen3-8B-FP8 安装vllm 创建虚拟环境 mkdir vllm cd vllm/ python -m venv venv ource venv/bin/activat…...

编程日记 2025/8/21 18:31:06

QML ProgressBar控件详解

在 QML 中，ProgressBar 是一个常用的进度条控件，用于显示任务的完成进度。以下是 ProgressBar 的详细用法，包括基本用法、自定义样式、动态绑定数据等。 1. 基本用法 1.1 最简单的 ProgressBar import QtQuick.Controls 2.15ProgressBar {w…...

编程日记 2025/8/21 4:15:27

STM32教程：串口USART通讯协议原理及分析（基于STM32F103C8T6最小系统板标准库开发）详细教程

前言：本文主要介绍了单片机的通讯协议和STM32的串口USART通讯的原理及分析。通信的目的将一个设备的数据传送到另一个设备，扩展硬件系统。通信协议指定通信的规则，通信双方按照协议规则进行数据收发。 STM32常见通讯协议各通讯特点 USART： TX（发送）、RX（接…...

编程日记 2025/8/21 18:26:21

EDA文件

不同的EDA软件使用不同的文件扩展名和格式，以下是主流工具对应的文件类型： EDA软件文件扩展名说明Altium Designer.PcbDocAltium专属格式，需用原软件打开，可导出为Gerber或STEP文件用于生产。KiCad.kicad_pcbKiCad项目文件&#…...

编程日记 2025/8/19 6:11:11

【C/C++】构造函数与析构函数

📘 C 构造函数与析构函数详解笔记 🧠 为什么需要构造函数与析构函数？ 在 C 中，对象创建和销毁过程如果仅靠手动赋值和清理非常容易出错。为此，语言提供了构造函数和析构函数： 构造函数：用于在…...

编程日记 2025/8/20 12:22:06

在Unity AR应用中实现摄像头切换功能

本教程将详细讲解如何在Unity AR Foundation项目中实现前后摄像头切换功能，并提供完整的代码解析。我们将使用AR Foundation的核心组件和简单的UI交互来实现这一功能。第一部分：环境准备 1.1 所需组件 Unity 2019.4或更高版本 AR Foundation 4.0+ ARCore XR Plugin（Andro…...

编程日记 2025/8/21 18:42:04

Pycharm（十九）深度学习

一、深度学习概述 1.1 什么是深度学习深度学习是机器学习中的一种特殊方法，它使用称为神经网络的复杂结构，特别是“深层”的神经网络，来学习和做出预测。深度学习特别适合处理大规模和高维度的数据，如图像、声音和文本。深度学习、机器学习和人工智能之间的关系如下图所…...

编程日记 2025/8/20 21:22:25

状态模式 VS 策略模式

在软件开发的世界里，设计模式如同工匠手中的精良工具，能帮助开发者打造出结构清晰、易于维护和扩展的软件系统。状态模式和策略模式便是其中两个常用却容易让人混淆的设计模式。接下来，我们会详细剖析它们的区别、适用场景，并给出…...

编程日记 2025/8/21 18:35:29

如何在 Ubuntu 24.04 本地安装 DeepSeek ？

在本地 Ubuntu 系统上安装 DeepSeek 可以让您在本地使用高级 AI 功能，从而消除对云服务的依赖需求。 What is DeepSeek? DeepSeek 是一个先进的开源人工智能模型，专为自然语言理解和生成而设计。它提供了类似ChatGPT的强大功能。 Prerequisites: A …...

编程日记 2025/8/20 12:40:09

云计算训练营笔记day02（Linux、计算机网络、进制）

Linux 是一个操作系统 Linux版本 RedHat Rocky Linux CentOS7 Linux Ubuntu Linux Debian Linux Deepin Linux 登录用户管理员 root a 普通用户 nsd a 打开终端放大: ctrl shift 缩小: ctrl - 命令行提示符 [rootlocalhost ~]# ~ 家目录 /root 当前登录的用户…...

编程日记 2025/8/21 18:38:17

数据库实验10 函数存储

数据库实验10 一、实验目的掌握函数和存储过程的定义方法，包括标量函数、表值函数、存储过程的语法结构。理解函数和存储过程的作用及原理，区分标量函数与表值函数的应用场景，掌握存储过程的参数传递、逻辑控制和错误处理机制。能够熟练运…...

编程日记 2025/8/21 8:59:58

SQL Server执行安装python环境

安装注意事项启用python脚本支持 sp_configure external scripts enabled, 1; RECONFIGURE; 安装后接受 Python EULA协议接受python授权 setup.exe /qs /ACTIONInstall /FEATURESSQL_INST_MR /INSTANCENAME您的实例名 /IACCEPTROPENLICENSETERMS1 /IACCEPTPYTHONLICENSETE…...

编程日记 2025/8/19 6:10:56

ActiveMQ 安全机制与企业级实践（二）

四、企业级实践案例分析 4.1 案例背景介绍某大型电商企业拥有复杂的分布式系统，涵盖订单管理、库存管理、物流配送、用户服务等多个核心业务模块。在业务快速发展过程中，系统间的通信量呈爆发式增长，为了实现系统的高效解耦和异步通信&…...

编程日记 2025/8/21 18:37:00

ActiveMQ 安全机制与企业级实践（一）

一、引言在当今数字化时代，企业级应用的架构愈发复杂，各个系统之间的通信和协作变得至关重要。消息队列作为一种高效的异步通信机制，在企业级应用集成中扮演着关键角色。ActiveMQ 作为一款广泛使用的开源消息中间件，以其丰富的功…...

编程日记 2025/8/21 18:38:16

【Python pass 语句】

在 Python 中，pass 语句是一个特殊的空操作（no-op）语句，它的核心作用是保持程序结构的完整性，同时不执行任何实际操作。以下是详细说明： 一、基础特性语法占位符：当语法上需要一条语句&#x…...

编程日记 2025/8/21 18:36:58

Maven依赖未生效问题

在你描述的情况下，测试类无法找到 Maven 依赖的 jar 包，可能由以下原因导致： 依赖未正确添加到 pom.xml 检查 pom.xml 文件中是否正确添加了 Elasticsearch 和 JUnit 等相关依赖。例如，对于 Elasticsearch 的 TransportClient 相关…...

编程日记 2025/8/21 18:33:23

NGINX `ngx_http_auth_request_module` 模块详解基于子请求的认证授权方案

一、背景介绍在 Web 系统中，我们常常需要根据外部服务（例如单点登录、API 网关、权限中心）的结果来判断用户是否有权限访问某个资源。NGINX 提供的 ngx_http_auth_request_module 模块，正是为这种场景而生。它允许通过向后端发送…...

编程日记 2025/8/19 3:32:44

Qwen3简要介绍（截止20250506）

Qwen3是阿里云推出的一个大语言模型系列，它在多个方面进行了升级和优化。以下是Qwen3的一些主要特点： 模型规模多样：Qwen3提供了一系列不同规模的模型，包括稠密模型（0.6B、1.7B、4B、8B、14B、32B）以及专家…...

编程日记 2025/8/21 18:33:24

精益数据分析（42/126）：移动应用商业模式的深度剖析与实战要点

精益数据分析（42/126）：移动应用商业模式的深度剖析与实战要点在创业和数据分析的学习之路上，我们持续探索不同商业模式的奥秘，今天聚焦于移动应用商业模式。我希望和大家一起进步，深入解读《精益数据分析…...

编程日记 2025/8/19 6:10:43

2025.5.6总结

昨天12：30睡觉，结果翻来覆去睡不着，两点半左右才睡着。看了一下最近的睡眠打卡，平均入睡时间是凌晨12：30。自五一一个人过了5天，我才明白，人是需要社交的，只有在社交中才能找到自我…...

编程日记 2025/8/19 6:10:41

UE5 脚部贴地不穿过地板方案

UE自带的IK RIG和ControlRig技术【UE5】角色脚部IK——如何让脚贴在不同斜度的地面(设置脚的旋转)_哔哩哔哩_bilibili 实验后这个还是有一部分问题,首先只能保证高度不能穿过,但是脚步旋转还是会导致穿模 IK前,整个模型在斜坡上会浮空参考制作:https://www.youtube.com/w…...

编程日记 2025/8/18 23:50:12

Spring AI 函数调用（Function Call）系统设计方案

一、系统概述与设计目标 1.1 核心目标从零构建一个灵活、安全、高效的函数调用系统，使大语言模型能够在对话中调用应用程序中的方法，同时保持良好的开发体验和企业级特性。 1.2 主要功能需求支持通过注解将普通Java方法标记为可被AI调用的函数自动生成符合LLM要求的函数…...

编程日记 2025/8/20 6:48:55

Jupyter Notebook为什么适合数据分析？

Jupyter Notebook 是一款超实用的 Web 应用程序，在数据科学、编程等诸多领域都发挥着重要作用。它最大的特点就是能让大家轻松创建和共享文学化程序文档。这里说的文学化程序文档，简单来讲，就是把代码、解释说明、数学公式以及数据可视化结果…...

编程日记 2025/8/18 21:25:44

Leetcode Hot 100字母异位词分词

题目描述思路根据题意，我们可以得知我们需要将字符统计数一样的字符串，放在一起，并以列表进行返回。因此我们可以通过一个哈希表，把统计相同的放在一起，最终返回即可代码 class Solution:def groupAnagrams(self…...

编程日记 2025/8/21 7:13:58

用python实现鼠标监听与手势交互

摘要本文探讨了一种基于Python的数学函数可视化系统的设计与实现，该系统整合了Pynput鼠标事件监听机制、Matplotlib绘图引擎以及PyQt5图形用户界面框架。系统通过人机交互方式实现了函数图像的直观构建与可视化表达，支持多种函数类型的参数化建模与实时…...

编程日记 2025/8/19 6:10:31

UE5 GAS开发P47 游戏标签

FGameplayTag 是 Unreal Engine 中用于标记游戏对象的系统。它允许开发者为游戏对象分配标签，以便在游戏中对其进行分类、识别和操作。 FGameplayTag 结构用于表示单个游戏标签，而 FGameplayTagContainer 则用于表示一组游戏标签。这些标签可以用于诸…...

编程日记 2025/8/20 16:52:48

C# 实现PLC数据自动化定时采集与存储（无需界面，自动化运行）

C# 实现PLC数据自动化定时采集与存储（无需界面，自动化运行） 在平时开发中，我们时常会遇到需要后台静默运行的应用场景，这些程序不需要用户的直接操作或界面展示，而是专注于定时任务的执行。比如说&#xf…...

编程日记 2025/8/20 21:42:45

Java实现堆排序算法

1. 堆排序原理图解堆排序是一种基于二叉堆（通常使用最大堆）的排序算法。其核心思想是利用堆的性质（父节点的值大于或等于子节点的值）来高效地进行排序。堆排序分为两个主要阶段：建堆和排序。堆排序步骤： …...

编程日记 2025/8/18 13:20:34

封装axios，实现取消请求

封装axios import axios from axios// 创建自定义的请求类 class CancelableRequest {constructor() {this.controller new AbortController()}abort() {this.controller.abort()} }// 创建 axios 实例 const service axios.create({baseURL: process.env.VUE_APP_BASE_API,…...

编程日记 2025/8/19 6:10:23

在 Laravel 12 中实现 WebSocket 通信

在 Laravel 12 中实现 WebSocket 通信主要有两种主流方案：‌官方推荐的 Laravel Reverb‌ 和 ‌第三方库（如 Soketi/Pusher 或 Workerman/Swoole）‌。以下是详细实现步骤： 一、官方方案：Laravel Reverb（推…...

编程日记 2025/8/18 15:53:07

iPhone或iPad想要远程投屏到Linux系统电脑，要怎么办？

苹果手机自带AirPlay投屏功能，对于苹果电脑，自然可以随时投屏。但如果电脑是Linux系统，而且还想要远程投屏呢？这时候要怎么将iPhone或iPad投屏到Linux电脑？ 方法很简单，用AirDroid Cast的网页版即可。步骤…...

编程日记 2025/8/19 6:10:19

Ubuntu 22.04 安装配置远程桌面环境指南

在云服务器或远程主机上安装图形化桌面环境，可以极大地提升管理效率和用户体验。本文将详细介绍如何在 Ubuntu 22.04 (Jammy Jellyfish) 系统上安装和配置 Xfce4 桌面环境，并通过 VNC 实现远程访问。系统环境操作系统：Ubuntu 22.04 LTS (Jammy Jellyfish)架构：AMD64安装…...

编程日记 2025/8/19 6:10:17

【Redis | 基础总结篇】

目录前言： 1.Redis的介绍： 2.Redis的类型与命令： 3.Redis的安装： 3.1.Windows版本 3.2.Linux版本 4.在java中使用Redis： 4.1.介绍 4.2.Jedis 4.3.Spring Data Redis 前言： 本篇主要讲述了Redis的…...

编程日记 2025/8/19 6:10:15

如何通过外网访问内网?对比5个简单的局域网让互联网连接方案

在实际应用中，常常需要从外网访问内网资源，如远程办公访问公司内部服务器、在家访问家庭网络中的设备等。又或者在本地内网搭建的项目应用需要提供互联网服务。以下介绍几种常见的外网访问内网、内网提供公网连接实现方法参考。一、公网IP路由器端口映…...

编程日记 2025/8/19 4:54:06

iMeta | 临床研究+scRNA-seq的组合思路 | 真实世界新辅助研究，HER2⁺就一定受益？单细胞揭示真正的“疗效敏感克隆”

👋 欢迎关注我的生信学习专栏~ 如果觉得文章有帮助，别忘了点赞、关注、评论，一起学习近年来，临床医学与单细胞组学的结合开启了全新的研究范式，让临床医生能以“显微镜”般的精度，深入理解疾病机制与疗效…...

编程日记 2025/8/19 7:56:33

国标GB28181视频平台EasyCVR安防系统部署知识：如何解决异地监控集中管理和组网问题

在企业、连锁机构及园区管理等场景中，异地监控集中管控与快速组网需求日益迫切。弱电项目人员和企业管理者亟需整合分散监控资源，实现跨区域统一管理与实时查看。一、解决方案案例一：运营商专线方案利用运营商专线，连接各分…...

编程日记 2025/8/19 3:43:55

220V降12V1000mA非隔离芯片WT5110

220V降12V1000mA非隔离芯片WT5110 以下是采用WT5110芯片的非隔离降压电源电路设计，将220V电压转换为12V、1000mA输出： 一、WT5110芯片简介 WT5110是一款用于非隔离降压应用的集成电路，具备宽输入电压范围和高效的转换功能。它可以将高输入电…...

编程日记 2025/8/19 6:10:13

【ES】Elasticsearch字段映射冲突问题分析与解决

在使用Elasticsearch作为搜索引擎时，经常会遇到一些映射(Mapping)相关的问题。本文将深入分析字段映射冲突问题，并通过原生的Elasticsearch API请求来复现和解决这个问题。问题描述在实际项目中，我们遇到以下错误： Transport…...

编程日记 2025/8/19 6:10:11

【上位机——MFC】绘图

相关类 CDC类(绘图设备类)：封装了各种绘图相关的函数，以及两个非常重要的成员变量m_hDC和m_hAttribDC CPaintDC类，封装了在WM_PAINT消息中绘图的绘图设备 CClientDC类，封装了在客户区绘图的绘图设备 CGdiObject类(绘图对象类) 封…...

编程日记 2025/8/19 6:10:09

【AI】Ubuntu 22.04 evalscope 模型评测 Qwen3-4B-FP8

安装evalscope mkdir evalscope cd evalscope/ python3 -m venv venv source venv/bin/activate pip install evalscope[app,perf] -U -i https://mirrors.aliyun.com/pypi/simple --trusted-host mirrors.aliyun.compip install tiktoken omegaconf -i https://mirrors.aliyu…...

编程日记 2025/8/18 22:48:55

相关文章：