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

编程笔记 html5cssjs 059 css多列

news 2025/7/16 21:47:04

编程笔记 html5&css&js 059 css多列

  • 一、CSS3 多列属性
  • 二、实例
  • 小结

CSS3 可以将文本内容设计成像报纸一样的多列布局.

一、CSS3 多列属性

下表列出了所有 CSS3 的多列属性：

属性	描述
column-count	指定元素应该被分割的列数。
column-fill	指定如何填充列
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的宽度
columns	column-width 与 column-count 的简写属性。

二、实例

<!DOCTYPE html>
<html lang = "zh-cn">
<title>CSS多列 编程笔记 html5&css&js</title>
<meta charset = "utf-8"/>
<style>body {color: cyan;background-color: teal;}h1 {text-align: center}.newspaper {margin: auto;width: 80%;column-count: 3;}
</style>
<body>
<h1>多列显示</h1>
<div class = "newspaper">你来了，什么也没有带来，光着身子、空着手就来了！你哭了，预感到一个苦难的历程？当然，你走的时候也是什么都不会带走，甚至是那一副躯壳！你睁开眼晴，看见了一个陌生的世界，不曾有任何事先的约定，你和你的父母、亲人就这样邂逅了。你无从抱怨，你来到的是一个什么样的家庭、地域、气候、时代，那都是大自然的随机分配，没机会石头剪子布。既来之，则安之！如果你已经长到10岁以上（35岁以下），那本文接下来的内容就是为你准备的。你想活出怎样的人生？可能本文会对你有所帮助。至少作者希望是这样的。下面这段，先写给家长吧。如果家长不能看到，孩子自己看看也行，都是一个问题，立场不同，结论可以不一样，大家都自己思考吧，我不替别人下结论。孩子要生了还没生之前，这青年男女有段时间还是很兴奋的，可能孩子出生以后呢，那滋味可不是事先都想到了的。各种问题就来了。我们这里要探讨的成长管理，当然都是和孩子有关的。那么我们分析这些问题呢，就要从孩子出生以后开始。如果你的孩子问你：你为什么要生孩子呢？那你如何回答呢？“我们事先就就知道你这么可爱呀，所有你就来了呀！”。“就是有一天吧哈，哈哈哈，你长大自然就明白了，我们俩吧，未经得住诱惑，就有了你了！”。“要说这事吧，主要你得感谢你爷爷奶奶了，都是他们逼的，不然你恐怕还有等几年！”。“也没有为什么，人都这样，大家都生孩子，也就有了你。”。“意外，其实就是个意外”。无论是哪种情况，父母和孩子都是一场邂逅。就是意外的相遇。在孩子没有来到这个世上之前，互相没有打过招呼，也没有事先进行一场谈判。有的父母抱怨孩子的天赋不够好，立刻就被打脸打回来，现代科学早就证实，孩子的天赋主要是由父母的基因决定的。有的孩子抱怨自己的家庭条件差，这也只能怪他命不好了。假设事情可以事先商量的话，这事会怎么样呢？那孩子肯定要问哪，“你家在几线城市呀？住多大的房子呀？是不是学区房啊？你俩啥学历呀？有多少资产哪？身体健康不？”。这样的话人类就无法延续了。虽然孩子事先没有机会问，但你要做父母之前，的确自己要回答一下这些问题，毕竟这生或不生孩子，对于你来说一定程度上是可控的。很多人生了孩子以后就容易想起“时间都去哪儿了？”。显然，为孩子的付出可能超出了预料。一旦你做了这个决策并产生了结果，就是这里要说的“当你生了孩子”，那你可不能反悔呀！结论是，你不能“让世界充满爱”，但你必须“让家庭充满爱”。父母必须无条地爱自己的孩子，“无论他是出色还是平庸，无论他是漂亮还是丑陋，无论他是健康还是病患，无论他是温柔还是暴躁”。就有人偏偏不是这样的，很多事例，这里就不说了。转身再次面向孩子，我很无耐，人生之不如意十之八九，不可能每一个孩子都那么幸运，总是有的孩子家境没有那么富裕、知性、幸福；没有尽如人意的健康、聪慧、漂亮。“成长管理”是为人父母的职责。对于孩子，如果能够尽早地实现“自我管理”，那就更好了。
</div>
</body>
</html>

小结

需要多列的场景好像不多。

相关文章：

编程笔记 html5cssjs 059 css多列

编程笔记 html5&css&js 059 css多列 一、CSS3 多列属性二、实例小结 CSS3 可以将文本内容设计成像报纸一样的多列布局. 一、CSS3 多列属性 下表列出了所有 CSS3 的多列属性&#xff1a; 属性 描述 column-count 指定元素应该被分割的列数。 column-fill 指定如何填充…...

编程日记 2024/1/31 13:56:02

Facebook的元宇宙探索：虚拟社交的新时代

近年来&#xff0c;科技的飞速发展推动着人类社交方式的翻天覆地的改变。在这场数字化革命的浪潮中&#xff0c;社交媒体巨头Facebook正积极探索并引领着一个被誉为“元宇宙”的全新领域&#xff0c;试图为用户打造更为真实、丰富的虚拟社交体验。 元宇宙的崛起 元宇宙这个概念…...

编程日记 2024/1/31 13:55:01

用React给XXL-JOB开发一个新皮肤（四）：实现用户管理模块

目录 一. 简述二. 模块规划 2.1. 页面规划2.2. 模型实体定义 三. 模块实现 3.1. 用户分页搜索3.2. Modal 配置3.3. 创建用户表单3.4. 修改用户表单3.5. 删除 四. 结束语 一. 简述 上一篇文章我们实现登录页面和管理页面的 Layout 骨架&#xff0c;并对接登录和登出接口。这篇…...

编程日记 2024/1/31 13:52:59

某赛通电子文档安全管理系统 hiddenWatermark/uploadFile 文件上传漏洞复现

0x01 产品简介 某赛通电子文档安全管理系统（简称：CDG）是一款电子文档安全加密软件，该系统利用驱动层透明加密技术，通过对电子文档的加密保护，防止内部员工泄密和外部人员非法窃取企业核心重要数据资产，对电子文档进行全生命周期防护，系统具有透明加密、主动加密、智能…...

编程日记 2024/1/31 13:50:56

Redis五种数据类型及应用场景

1、数据类型 String(字符串&#xff0c;整数&#xff0c;浮点数)&#xff1a;做简单的键值对缓存 List(列表)&#xff1a;储存一些列表类型的数据结构 Hash(哈希)&#xff1a;包含键值对的无序散列表&#xff0c;结构化的数据 Set(无序集合)&#xff1a;交集&#xff0c;并集…...

编程日记 2024/1/31 13:42:50

测试环境搭建整套大数据系统（一：基础配置，修改hostname，hosts，免密）

一&#xff1a;使用服务器配置。 二&#xff1a;修改服务器名称hostname&#xff0c;hosts。 在 Linux 系统中&#xff0c;hostname 和 /etc/hosts 文件分别用于管理主机名和主机名解析。 在三台服务器上&#xff0c;分别执行以下命令。 vim /etc/hostnamexdso-hadoop-test-0…...

编程日记 2024/1/31 13:41:49

maven helper 解决jar包冲突方法

一 概要说明 1.1 说明 首先&#xff0c;解决idea中jar包冲突&#xff0c;使用maven的插件&#xff1a;maven helper插件&#xff0c;它能够给我们罗列出来同一个jar包的不同版本&#xff0c;以及他们的来源&#xff0c;但是对不同jar包中同名的类没有办法。 1.2 依赖顺序 …...

编程日记 2024/1/31 13:39:47

AppSrv-文件共享（23国赛真题）

2023全国职业院校技能大赛网络系统管理赛项–模块B：服务部署（WindowServer2022） 文章目录 AppSrv-文件共享题目配置步骤创建用户主目录共享文件夹：本地目录为d:\share\users\，允许所有域用户可读可写。在本目录下为所有用户添加一个以名称命名的文件夹，该文件夹将设置为所…...

编程日记 2024/1/31 13:37:45

AsyncLocal是如何实现在Thread直接传值的？

一&#xff1a;背景 1. 讲故事 这个问题的由来是在.NET高级调试训练营第十期分享ThreadStatic底层玩法的时候&#xff0c;有朋友提出了AsyncLocal是如何实现的&#xff0c;虽然做了口头上的表述&#xff0c;但总还是会不具体&#xff0c;所以觉得有必要用文字图表的方式来系统…...

编程日记 2024/1/31 13:36:44

Flask 入门1：一个简单的 Web 程序

1. 关于 Flask Flask诞生于2010年&#xff0c; Armin Ronacher的一个愚人节玩笑。不过现在已经是一个用python语言基于Werkzeug工具箱编写的轻量级web开发框架&#xff0c;它主要面向需求简单&#xff0c;项目周期短的小应用。 Flask本身相当于一个内核&#xff0c;其他几乎所…...

编程日记 2024/1/31 13:26:33

维护管理Harbor，docker容器的重启策略

维护管理Harbor 通过HarborWeb创建项目 在 Harbor 仓库中&#xff0c;任何镜像在被 push 到 regsitry 之前都必须有一个自己所属的项目。 单击“项目”&#xff0c;填写项目名称&#xff0c;项目级别若设置为"私有"&#xff0c;则不勾选。如果设置为公共仓库&#…...

编程日记 2024/1/31 13:24:31

Qt6入门教程 14：QToolButton

目录 一.简介 二.常用接口 1.void setMenu(QMenu * menu) 2.void setPopupMode(ToolButtonPopupMode mode) 3.void setToolButtonStyle(Qt::ToolButtonStyle style) 4.void setArrowType(Qt::ArrowType type) 5.void setDefaultAction(QAction * action) 三.实战演练 1…...

编程日记 2024/1/31 13:22:29

3D数据转换器HOOPS Exchange如何获取模型的几何数据？ 干货预警！

一、概述 前面讲解过模型在内存中的结构&#xff0c;现在回顾一下&#xff0c;当模型导入成功后&#xff0c;整个模型数据会以原生结构的 PRC 组装树形式存放到内存中。&#xff08;申请 HOOPS Exchange 试用&#xff09; PRC结构的主要类型包含四种&#xff0c;分别是…...

编程日记 2024/1/31 13:21:29

Coremail启动鸿蒙原生应用开发，打造全场景邮件办公新体验

1月18日&#xff0c;华为在深圳举行鸿蒙生态千帆启航仪式&#xff0c;Coremail出席仪式并与华为签署鸿蒙合作协议&#xff0c;宣布正式启动鸿蒙原生应用开发。作为首批拥抱鸿蒙的邮件领域伙伴&#xff0c;Coremail的加入标志着鸿蒙生态版图进一步完善。 Coremail是国内自建邮件…...

编程日记 2024/1/31 13:19:27

基于CVITEK_CV1821+SOI_Q03P的IPC方案

方案概述&#xff1a; 该方案基于主控平台CVITEK_CV1821和sensor SOI_Q03P&#xff0c;运用于智能监控IP摄像头&#xff0c;可用于户外或室内。采用了2304x1296的分辨率&#xff0c;30的帧率&#xff0c;支持HDR。作为3M的监控摄像头&#xff0c;通过ISP图像调校技术&#xff…...

编程日记 2024/1/31 13:13:19

chromedriver安装和环境变量配置

chromedriver 1、安装2、【重点】环境变量配置&#xff08;1&#xff09;包的复制&#xff1a;&#xff08;2&#xff09;系统环境变量配置 3、验证 1、安装 网上随便搜一篇chromedriver的安装文档即可。这里是一个快速链接 特别提醒&#xff1a;截止2024.1.30&#xff0c;chr…...

编程日记 2024/1/31 13:10:16

Linux浅学笔记03

目录 有关root的命令 用户和用户组 用户组管理&#xff1a;&#xff08;以下需要root用户执行&#xff09; 创建用户组: 删除用户组&#xff1a; 用户管理&#xff1a;&#xff08;以下需要root用户执行&#xff09; 创建用户&#xff1a; 删除用户&#xff1a; 查看用…...

编程日记 2024/1/31 13:09:15

【vue】图片加载骨架

一、前言 在网速较低或者网站的服务器宽带只有几MB的情况下&#xff0c;网页中的图片加载时&#xff0c;要么空白&#xff0c;要么像打印机一样一行一行地“扫描”出来&#xff0c;为了提升用户体验&#xff0c;可以给图片标签外加一层骨架。 无骨架 有骨架 二、详细设计 每张…...

编程日记 2024/1/31 13:08:14

leetcode59. 螺旋矩阵 II

leetcode59. 螺旋矩阵 II 题目 思路 螺旋数组&#xff0c;一次螺旋4个方向&#xff08;上行从左到右、右列从上到下、下行从右到左、左列从下到上&#xff09;&#xff0c;共执行(n//2)次螺旋。且对于n为奇数时&#xff0c;额外填充中心点nums[mid][mid] n 每一次螺旋圈下来…...

编程日记 2024/1/31 13:07:13

bash 5.2中文修订5

Grouping Commands 命令分组 Bash 提供两种方法将要执行的命令列表分组为一个单元。当命令被分组时&#xff0c;重定向可以应用于整个命令列表。例如&#xff0c;列表中所有命令的输出可以被重定向到单个流。 () 圆括号命令分组 ( list ) 将命令列表放在括号之间会强制 she…...

编程日记 2024/1/31 13:05:11

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

编程新知 2025/7/16 4:20:45

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/7/12 7:16:15

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/7/11 18:56:16

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/6/16 21:39:46

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2025/6/16 23:36:50

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/6/18 22:53:06

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

编程新知 2025/7/15 6:59:34

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

编程新知 2025/7/11 5:12:20

MinIO Docker 部署：仅开放一个端口

MinIO Docker 部署：仅开放一个端口 在实际的服务器部署中，出于安全和管理的考虑，我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务，支持 Docker 部署，但默认情况下它需要两个端口：一个是 API 端口（用于存储和访问数据），另一个是控制台端口（用于管理界面…...

编程新知 2025/6/21 15:09:46

ubuntu22.04 安装docker 和docker-compose

首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...

编程新知 2025/7/6 4:09:48