js设置css变量控制页面一行展示指定个数的元素
前置知识:
CSS变量之var()函数的应用——动态修改样式 & root的使用
flex相关知识
场景: 动态设置给父元素内子元素设置每行排列几个

通过 document.body.style.setProperty('--itemNum', 5)设置样式变量,然后通过给父元素设置display: flex;,子元素设置flex: 0 0 calc(90% / var(--itemNum))动态控制子元素的宽度

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.content {display: flex;flex-wrap: wrap;justify-content: flex-start;padding-bottom: 50px;padding-left: 40px;text-align: center;border:1px solid black;}.child {width: 100px;height: 100px;box-sizing: border-box;flex: 0 0 calc(90% / var(--itemNum));text-align: center;background-color: #d8ffff;border-radius: 47px;margin: 20px 0;margin-right:calc(10% / var(--itemNum));}
</style><body><div class="content"><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div></div>
</body>
<script>document.body.style.setProperty('--itemNum', 5)</script>
</html>
相关文章:
js设置css变量控制页面一行展示指定个数的元素
前置知识: CSS变量之var()函数的应用——动态修改样式 & root的使用 flex相关知识 场景: 动态设置给父元素内子元素设置每行排列几个 通过 document.body.style.setProperty(--itemNum, 5)设置样式变量,然后通过给父元素设置display: f…...
4.0 Spring Boot入门
1. Spring Boot概述 Spring Boot介绍 Spring Boot是Pivotal团队在2014年推出的全新框架,主要用于简化Spring项目的开发过程,可以使用最少的配置快速创建Spring项目。 Spring Boot版本 2014年4月v1.0.0.RELEASE发布。 2.Spring Boot特性 约定优于配…...
[国产MCU]-BL602开发实例-I2C与总线设备地址扫描
I2C与总线设备扫描 文章目录 I2C与总线设备扫描1、I2C介绍2、I2C驱动API介绍3、I2C使用实例I2C (Inter-Intergrated Circuit)是一种串行通讯总线,使用多主从架构,用来连接低速外围装置。 每个器件都有一个唯一的地址识别,并且都可以作为一个发送器或接收器。每个连接到总线的…...
Python Opencv实践 - 图像平移
import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/pomeranian.png", cv.IMREAD_COLOR)#图像平移 #cv.warpAffine(src, M, dsize[, dst[, flags[, borderMode[, borderValue]]]]) # M是仿射变换矩阵,对于平移来说M是一…...
易服客工作室:WordPress 6.3性能改进
随着WordPress 6.3发布,本文总结了该版本的性能改进。虽然WordPress 6.2显著提高了Core的加载时间性能,树立了很高的标准,但WordPress 6.3性能改进已经超越了这些结果:根据进行的性能基准测试,与WordPress 6.2相比&…...
LeetCode 周赛上分之旅 #39 结合中心扩展的单调栈贪心问题
⭐️ 本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 和 BaguTree Pro 知识星球提问。 学习数据结构与算法的关键在于掌握问题背后的算法思维框架,你的思考越抽象,它能覆盖的问题域就越广,理解难度…...
山东布谷科技直播软件开发WebRTC技术:建立实时通信优质平台
在数字化的时代,实时通信成为了人们远程交流的主要方式,目前市场上也出现了很多带有实时通信交流的软件,实时通信符合人们现在的需求,所以在直播软件开发过程中,开发者也运用了实时通信技术为直播软件加入了实时通信的…...
Golang-语言源码级调试器 Delve
前言 Go 目前的调试器有如下几种: GDB 最早期的调试工具,现在用的很少。LLDB macOS 系统推荐的标准调试工具,单 Go 的一些专有特性支持的比较少。Delve 专门为 Go 语言打造的调试工具,使用最为广泛。 本篇简单说明如何使用 Del…...
构建Docker容器监控系统(Cadvisor +InfluxDB+Grafana)
目录 案例概述 Cadvisor InfluxDBGrafana 1.1、 Cadvisor 1.2、InfluxDB 1.3、Grafana 1.4、监控组件架构 1.5、开始部署 安装docker-ce 阿里云镜像加速器 创建自定义网络 创建influxdb容器 案例概述 Docker作为目前十分出色的容器管理技术,得到大量企业…...
【Vue3】keep-alive 缓存组件
当在 Vue.js 中使用 <keep-alive> 组件时,它将会缓存动态组件,而不是每次渲染都销毁和重新创建它们。这对于需要在组件间快速切换并且保持组件状态的情况非常有用。 <keep-alive> 只能包含(或者说只能渲染)一个子组件…...
24成都信息工程大学809软件工程考研
1.渐增式与非渐增式各有何优、缺点?为什么通常采用渐增式? 非渐增式是将所有的模块一次连接起来,简单、易行、节省机时,但测试过程难于排错,发现错误也很难定位,测试效率低;渐增式是将模块一个…...
Filament for Android 编译搭建(基于Ubuntu20.04系统)
一、Filament 源代码下载 github下载地址: 2、安装clang 我是直接安装clang-10 Ubuntu 20.04 ,sudo apt install clang 命令默认就是clang-10 $sudo apt-get install clang-10 # 安装 AST.h 等头文件 $sudo apt-get install libclang-10-dev $sudo …...
【MySQL--->数据库操作】
文章目录 [TOC](文章目录) 一、操作语句1.增2.删3.改4.查5.备份 二、字符集与校验规则 一、操作语句 1.增 语句格式:create database [if no exists]数据库名[create_specification [,create_specification] …]; 中括号内是可选项,if no exists是指如果数据库不存在就创建,存…...
PhotoShop2023 Beta AI版安装教程
从 Photoshop 开始,惊艳随之而来 从社交媒体贴子到修饰相片,设计横幅到精美网站,日常影像编辑到重新创造 – 无论什么创作,Photoshop 都可以让它变得更好。 Photoshop2023 Beta版本安装教程和软件下载 地址:点击…...
并发冲突导致流量放大的线上问题解决
事故现象 生产环境,转账相关请求失败量暴增。 直接原因 现网多个重试请求同时到达 svr,导致内存数据库大量返回时间戳冲突。业务方收到时间戳冲突,自动进行业务重试,服务内部也存在重试,导致流量放大。 转账 首先…...
Spring Cloud Gateway过滤器GlobalFilter详解
一、过滤器的场景 在springCloud架构中,网关是必不可少的组件,它用于服务路由的转发。对客户端进行屏蔽微服务的具体细节,客户端只需要和网关进行交互。所以网关顾名思义,就是网络的一个关卡。它就是一座城的城门守卫。所以这个守…...
【LeetCode】1281.整数的各位积和之差
题目 给你一个整数 n,请你帮忙计算并返回该整数「各位数字之积」与「各位数字之和」的差。 示例 1: 输入:n 234 输出:15 解释: 各位数之积 2 * 3 * 4 24 各位数之和 2 3 4 9 结果 24 - 9 15示例 2&…...
22、springboot的Profile(通过yml配置文件配置 profile,快速切换项目的开发环境)
springboot的Profile ★ 何谓Profile 应用所在的运行环境发生切换时,配置文件常常就需要随之修改。Profile:——就是一组配置文件及组件的集合。可以整个应用在不同的profile之间切换(设置活动profile),整个应用都将使…...
2023-08-12力扣每日一题-暴力hard
链接: 23. 合并 K 个升序链表 题意: 如题 解: 时间668ms击败 5.00%使用 C 的用户/内存12.37mb击败 87.96%使用 C 的用户 循环选择插入新链表的节点,纯正的暴力,不过空间用得少 最坏应该是1E4*1E4,没…...
Mac安装nvm教程及使用
nvm 是 node 版本管理器,也就是说一个 nvm 可以管理多个 node 版本(包含 npm 与 npx),可以方便快捷的安装、切换 不同版本的 node。 1、直接通过brew安装 执行命令:brew install nvm PS: 如果没有安装br…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目:3442. 奇偶频次间的最大差值 I 思路 :哈希,时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况,哈希表这里用数组即可实现。 C版本: class Solution { public:int maxDifference(string s) {int a[26]…...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流,定义在 <sstream> 中: std::istringstream:输入流,从已有字符串中读取并解析。std::ostringstream:输出流,向内部缓冲区写入内容,最终取…...
用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目,所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...
如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败,具体原因是客户端发送了密码认证请求,但Redis服务器未设置密码 1.为Redis设置密码(匹配客户端配置) 步骤: 1).修…...
