css_23_多列布局

  • 常用值:
    column-count:指定列数,值是数字。

column-width:指定列宽,值是长度。

columns :同时指定列宽和列数,复合属性;值没有数量和顺序要求。

column-gap:设置列边距,值是长度。

column-rule-style:设置列与列之间边框的风格,值与 border-style 一致。

column-rule-width:设置列与列之间边框的宽度,值是长度。

column-rule-color ::设置列与列之间边框的颜色。

coumn-rule :设置列边框,复合属性。

column-span: 指定是否跨列;

值: none 、all。

举例:

 .outer {width: 1000px;margin: 0 auto;/* 直接指定列数 */column-count: 5;/* 指定每一列的宽度,会自动计算列数 */column-width:220px ;/* 复合属性,能同时指定列宽和列数 */columns: 4;/* 调整列间距 */column-gap: 20px;/* 每一列的边框宽度 */column-rule-width: 2px;/* 每一列的边框风格 */column-rule-style: dashed;/* 每一列的边框颜色 */column-rule-color: red;/* 边框相关的复合属性 */column-rule: 2px dashed red;}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/864878.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java时间转换

一、线程不安全 Date date new Date(); SimpleDateFormat dateFormat new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String prefix dateFormat.format(date);二、线程安全,建议使用 String t1 LocalDateTime.now().format(DateTimeFormatter.ofPattern("y…

【C++】STL-stack_queue

目录 1、stack和queue的使用 1.1 最小栈 1.2 栈的弹出和压入序列 1.3 二叉树的层序遍历 2、stack和queue的模拟实现 2.1 适配器 2.2 deque 2.2.1 deque的成员变量 2.2.2 deque的迭代器 2.2.3 deque尾插元素 2.2.4 deque头插元素 2.2.5 下标访问 2.2.6 deque的不足 …

Transformer模型学习

Transformer模型是深度学习领域的一种创新架构,尤其在自然语言处理(NLP)任务中表现出色。它是由Vaswani等人在2017年的论文《Attention is All You Need》中首次提出的。以下是对Transformer模型的详细介绍: Transformer的起源和…

golang结合neo4j实现权限功能设计

neo4j 是非关系型数据库之图形数据库,这里不再赘述。 传统关系数据库基于rbac实现权限, user ---- role ------permission,加上中间表共5张表。 如果再添上部门的概念:用户属于部门,部门拥有 角色,则又多了一层: user-…

力扣刷题--3158. 求出出现两次数字的 XOR 值【简单】

题目描述 给你一个数组 nums ,数组中的数字 要么 出现一次,要么 出现两次。 请你返回数组中所有出现两次数字的按位 XOR 值,如果没有数字出现过两次,返回 0 。 示例 1: 输入:nums [1,2,1,3] 输出&…

数据加密解密和哈希的解析

[S1301]数据的加解密 对提供的原始数据(字符串或者二进制数组)进行加密是数据保护框架体提供的基本功能,接下来我们利用一个简单的控制台程序来演示一下加解密如何实现。数据的加解密均由IDataProtector对象来完成,而该对象由IDa…

Linux硬链接和软链接(符号链接)

ln 是 Linux 和 Unix 系统中用来创建链接的命令。它的基本用法如下: 创建硬链接: ln source_file target_link这会创建一个名为 target_link 的硬链接,指向 source_file。硬链接实际上是文件系统中的一个额外条目,指向相同的数据块…

Elasticsearch:Runtime fields - 运行时字段(一)

运行时字段(runtime fields)是在查询时计算的字段。运行时字段使你能够: 向现有文档添加字段而无需重新索引数据开始处理数据而无需了解其结构在查询时覆盖索引字段返回的值定义用于特定用途的字段而无需修改底层架构 你可以像访问其他任何…

bash条件判断基础adsawq1`1nn

判断的作用 判断后续操作的提前条件是否满足如果满足执行一种命令不满足则执行另一种指令 条件测试类型: 整型测试字符测试文字测试 整数测试:比较两个整数谁大谁小,是否相等; 二元测试: num1 操作符 num2 -eq: 等于…

uniapp封装虚拟列表滚动组件

uniapp封装虚拟列表滚动组件 这里用到一个列表&#xff0c;然后数据可能有很多很多…&#xff0c;一次性全部渲染到dom上会卡顿&#xff0c;很废性能&#xff0c;于是用了这个虚拟列表就变丝滑很多很多。 组件mosoweInventedList 代码&#xff1a; <!-- 虚拟滚动列表组件&a…

BASH and SH in SHELL scripts

一、执行脚本的现象 为了测试一个小的功能&#xff0c;写了一个小脚本&#xff0c;类似的内容如下&#xff1a; #!/bin/shecho "start api test ......"for((i1;i<10;i)); do echo "cur id :" $i; done echo "end."执行一下&#xff0c;“…

代码随想录Day67(图论 part04)

110.字符串接龙 题目&#xff1a;110. 字符串接龙 (kamacoder.com) 思路&#xff1a;没有思路 答案 import java.util.*;public class Main {public static void main(String[] args) {Scanner scanner new Scanner(System.in);int n scanner.nextInt();String beginStr sc…

华为手机怎么打印文件?

关于华为手机打印的问题&#xff0c;如果您有打印机&#xff0c;并且已经成功和华为手机相连&#xff0c;在解决上就要容易很多。 具体操作如下&#xff1a; 选择文件 文件来源&#xff1a;华为手机上的文件可以来自多个应用&#xff0c;如图库、备忘录、文件管理等&#xf…

20240628模拟赛总结

cf好了 让我们开始 T1 Two Regular Polygons 判断能不能构造出题中要求的正多边形 关键是n%m0 Two Regular Polygons #include<bits/stdc.h> using namespace std; int t; int n,m; int main() {cin>>t;for(int i1;i<t;i){cin>>n>>m;if(n%m0)co…

C++与C#创建位图,是否需要区分RGB和BGR模式

在处理位图时&#xff0c;确实需要区分RGB和BGR模式&#xff0c;因为不同的库和API对颜色通道的排序有不同的约定。具体到C与C#&#xff0c;这一点也是需要注意的。 C 创建位图 使用GDI或WIC (Windows Imaging Component): 当你在C中使用这些Windows API创建或操作位图时&…

MySQL——事务ACID原则、脏读、不可重复读、幻读

什么是事务 要么都成功&#xff0c;要么都失败 一一一一一一一 1. SQL执行&#xff1a;A给B转账 A 1000 ---->200 B 200 2. SQL执行&#xff1a;B收到A的钱 A 800 B 400 一一一一一一一 将一组SQL放在一个批次中去执行~ 事务原则&#xff1a;ACI…

学习笔记(linux高级编程)10

IPC 进程间通信 interprocess communicate 三大类&#xff1a; 1、古老的通信方式 无名管道 有名管道 信号 2、IPC对象通信 system v BSD suse fedora kernel.org 消息队列(用的相对少&#xff0c;这里不讨论) 共享内存 信号量集 3、socket通信 网络通信 特…

Qt | Qt6.5.3创建一个安卓APP并发布到真机

01、重点知识公布 【1】Qt | windows Qt6.5.3安装&安卓环境搭建&虚拟机调试和真机调试完美版(保姆级教程)VS2022 配置Qt编译环境 | winows安装Qt5.14.2 | VS2017和Qt5配置成功指南

TF/IDF算法

第1关&#xff1a;去除停用词 任务描述 本关任务&#xff1a;根据本关所学有关停用词的知识&#xff0c;编写使用停用词表去除停用词的程序并通过测试用例。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 停用词的意义&#xff1b; 去除停用词的步骤。 …

手机注册卡知多少

顾名思义&#xff0c;手机注册卡也是一种手机卡&#xff0c;只是这种手机卡没有套餐&#xff0c;没有流量&#xff0c;只能用来接收短信。 因为只能接收短信&#xff0c;所以大家可以用来注册各种APP和会员账户&#xff0c;一方面进行薅羊毛&#xff0c;另一方面可以进行自媒体…