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

css使用弹性盒,让每个子元素平均等分父元素的4/1大小

css使用弹性盒,让每个子元素平均等分父元素的4/1大小

原本:

           ul {padding: 0;width: 100%;background-color: rgb(74, 80, 62);display: flex;justify-content: space-between;flex-wrap: wrap;li {/* 每个占4/1 */overflow: hidden;background-color: rgb(30, 15, 46);display: flex;justify-content: space-between;align-items: center;flex-direction: column;}

修改后:

li {padding: 0;border: 1px solid #00bcd4;background-color: rgb(30, 15, 46);display: flex;justify-content: space-between;align-items: center;flex-direction: column;flex: 0 0 50%; /* 宽度设置为父元素的1/2 */max-width: 50%; /* 最大宽度设置为父元素的1/2 */height: 50%; /* 高度设置为父元素的1/4 */&:nth-child(2n) {margin-right: 0; /* 每行的第二个li元素移除右边距 */}&:nth-child(odd) {margin-bottom: 0; /* 每列的第一个li元素(奇数位置)移除下边距 */}&:nth-last-child(-n + 2) {margin-bottom: 0; /* 最后两个li元素移除下边距 */}}}

相关文章:

css使用弹性盒,让每个子元素平均等分父元素的4/1大小

css使用弹性盒,让每个子元素平均等分父元素的4/1大小 原本: ul {padding: 0;width: 100%;background-color: rgb(74, 80, 62);display: flex;justify-content: space-between;flex-wrap: wrap;li {/* 每个占4/1 */overflow: hidden;background-color: r…...

设计模式的学习思路

学习设计模式确实需要一定的时间和实践,尤其是对于刚入门的人来说,因为一开始可能会感到有些混淆,尤其是当多个设计模式看起来有相似之处时。本博客是博主学习设计模式的思路历程,大家可以一起学习进步。设计模式学习-CSDN博客 1…...

stereopy 查看 data.tl 的可用属性

为了查看 data.tl 的可用属性,您可以使用 Python 的内置函数,例如 dir() 或 vars(),具体操作如下: 1. 列出 data.tl 的所有属性 使用 dir() 来查看所有可用的属性和方法: # 列出所有属性 print(dir(data.tl))这将返回一个列表,包含所有可用的方法、属性和内部字段。 2.…...

【2024APMCM亚太杯A题】详细解题思路

A题 复杂场景下的水下图像增强研究 解题思路问题一图像统计分析技术一、检测 偏色 的技术二、检测 弱光 的技术三、检测 模糊 的技术 聚类算法 问题二问题三问题四完整论文与代码 解题思路 问题一 问题 1:请使用类似上文提到的图像统计分析技术,对附件 …...

用 React18 构建Tic-Tac-Toe(井字棋)游戏

下面是一个完整的 Tic-Tac-Toe(井字棋)游戏的实现,用 React 构建。包括核心逻辑和组件分离,支持两人对战。 1. 初始化 React 项目: npx create-react-app tic-tac-toe cd tic-tac-toe2.文件结构 src/ ├── App.js…...

数据结构及算法--排序篇

在 C 语言中,可以通过嵌套循环和比较运算符来实现常见的排序算法,比如冒泡排序、选择排序或插入排序 目录 基础算法: 1.冒泡排序(Bubble Sort) 2.选择排序(Selection Sort) 3.插入排序&…...

泷羽sec学习打卡-网络七层杀伤链1

声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 关于蓝队基础的那些事儿-Base1 基本的企业网络架构是怎样的呢?高层管理IT管理影子IT中央技术…...

【QT】绘图

个人主页~ 绘图 一、绘图1、基础内容2、绘制形状(1)线段(2)矩形(3)圆形(4)文本(5)画笔(6)画刷 3、绘制图片(1)…...

vue3+elementui-plus el-dialog全局配置点击空白处不关闭弹窗

在与main.ts同级下的plugins文件夹(如果没有,新建一个)下建一个element.js文件(名字随便取) element.js文件内容如下: import ElementPlus from element-plus export default (app) > {console.log(app…...

Markdown语法说明

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…...

推荐一款专业电脑护眼工具:CareUEyes Pro

CareUEyes Pro是一款非常好用的专业电脑护眼工具,软件小巧,界面简单,它可以自动过滤电脑屏幕的蓝光,让屏幕显示更加的不伤眼,更加舒适,有效保护你的眼睛,可以自定义调节屏幕的色调,从…...

对subprocess启动的子进程使用VSCode python debugger

文章目录 1 情况概要(和文件结构)2 具体设置和启动步骤2.1 具体配置Step 1 针对attach debugger到子进程Step 2 针对子进程的暂停(可选) Step 3 判断哪个进程id是需要的子进程 2.2 启动步骤和过程 3 其他问题解决3.13.2 ptrace: Operation not permitted…...

Django启用国际化支持(2)—实现界面内切换语言:activate()

文章目录 ⭐注意⭐1. 配置项目全局设置:启用国际化2. 编写视图函数3. 配置路由4. 界面演示5、扩展自动识别并切换到当前语言设置语言并保存到Session设置语言并保存到 Cookie ⭐注意⭐ 以下操作依赖于 Django 项目的国际化支持。如果你不清楚如何启用国际化功能&am…...

基于单片机的多功能跑步机控制系统

本设计基于单片机的一种多功能跑步机控制系统。该系统以STM32单片机为主控制器,由七个电路模块组成,分别是:单片机模块、电机控制模块、心率检测模块、音乐播放模块、液晶显示模块、语音控制模块、电源模块。其中,单片机模块是整个…...

VSCode 如何选中包含某个字母的所有行

文章目录 写在前面一、需求描述二、解决方法参考链接 写在前面 自己的测试环境:VSCode 一、需求描述 由于需要处理文件,需求是删除文件中包含某个字母的所有行。 二、解决方法 在 Visual Studio Code (VSCode) 中,如果你想选中所有包含某…...

CSRF保护--laravel进阶篇

laravel对csrf非常重视,专门针对csrf作出了很多的保护。如果您是刚刚接触laravel的路由不久,那么您可能对于web.php路由文件的post请求很疑惑,因为get请求很顺利,而post请求则可能会遭遇失败。其中一个失败的原因是由于laravel的c…...

计算机网络-理论部分(二):应用层

网络应用体系结构 Client-Server客户-服务器体系结构:如Web,FTP,Telnet等Peer-Peer:点对点P2P结构,如BitTorrent 应用层协议定义了: 交换的报文类型,请求or响应报文类型的语法字段的含义如何…...

k8s1.31版本最新版本集群使用容器镜像仓库Harbor

虚拟机 rocky9.4 linux master node01 node02 已部署k8s集群版本 1.31 方法 一 使用容器部署harbor (1) wget https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo -O /etc/yum.repos.d/docker-ce.repo yum -y install docker-ce systemctl enable docker…...

QT中使用json格式存取矩阵数据

在 Qt 中,可以通过 QJsonDocument 和 QJsonArray 方便地存取 JSON 格式的矩阵数据。以下是存储和读取矩阵数据的完整实现示例。 1. 矩阵存储为 JSON 将矩阵(QVector<QVector<double>> 或其他二维数组)存储为 JSON 文件。 实现代码 #include <QJsonArray&g…...

k8s 集群安装

安装rockylinux https://www.jianshu.com/p/a5fe20318b8e https://www.cnblogs.com/haoee/p/18290506 配置VirtualBox双网卡 https://www.cnblogs.com/ShineLeBlog/p/17580311.html https://zhuanlan.zhihu.com/p/341328334 https://blog.csdn.net/qq_36544785/article/deta…...

Elasticsearch面试内容整理-核心概念与数据模型

在 Elasticsearch 中,理解核心概念与数据模型是非常重要的,因为它们定义了数据如何被组织、存储和搜索。以下是 Elasticsearch 的核心概念和数据模型的详细介绍。 核心概念 集群(Cluster) ● 集群是由一个或多个节点组成的,用于共同存储和搜索数据的集合。...

Spring Boot实现License生成和校验

Spring Boot实现License生成和校验 证书准备 # 1. 生成私钥库 # validity&#xff1a;私钥的有效期&#xff08;天&#xff09; # alias&#xff1a;私钥别称 # keystore&#xff1a;私钥库文件名称&#xff08;生成在当前目录&#xff09; # storepass&#xff1a;私钥库密码…...

es写入磁盘的过程以及相关优化

数据写入到内存buffer同时写入到数据到translog buffer,这是为了防止数据不会丢失每隔1s数据从buffer中refresh到FileSystemCache中,生成segment文件,这是因为写入磁盘的过程相对耗时,借助FileSystemCache,一旦生成segment文件,就能通过索引查询到了refresh完,memory bu…...

十大网络安全事件

一、私有云平台遭攻击&#xff0c;美国数千家公司工资难以发放 1月&#xff0c;专门提供劳动力与人力资本管理解决方案的美国克罗诺斯&#xff08;Kronos&#xff09;公司私有云平台遭勒索软件攻击&#xff0c;事件造成的混乱在数百万人中蔓延。 克罗诺斯母公司UKG集团&#xf…...

【数据结构】【线性表】栈的基本概念(附c语言源码)

栈的基本概念 讲基本概念还是回到数据结构的三要素&#xff1a;逻辑结构&#xff0c;物理结构和数据运算。 从逻辑结构来讲&#xff0c;栈的各个数据元素之间是通过是一对一的线性连接&#xff0c;因此栈也是属于线性表的一种从物理结构来说&#xff0c;栈可以是顺序存储和顺…...

修改ffmpeg实现https-flv内容加密

目录 1 前言 2 ffmpeg源码修改 2.1 增加头文件 2.2 http上下文增加解密密钥和AVAESCTR结构体 2.3 aes解密上下文初始化 2.4 对http数据部分解密 2.5 http关闭时清理资源 3 ffmpeg使用 1 前言 当前视频拉流已经通过URL鉴权方式来对访客身份进行识别和过滤&#xff0c;但…...

react中useMemo的使用场景

useMemo 是 React 的一个 Hook&#xff0c;用来优化性能&#xff0c;尤其是在计算复杂值时。它会记住&#xff08;缓存&#xff09;计算结果&#xff0c;只有在依赖项变化时才重新计算&#xff0c;避免不必要的重复计算。 import React, { useMemo } from react; function Ex…...

Pytorch自定义算子反向传播

文章目录 自定义一个线性函数算子如何实现反向传播 有关 自定义算子的实现前面已经提到&#xff0c;可以参考。本文讲述自定义算子如何前向推理反向传播进行模型训练。 自定义一个线性函数算子 线性函数 Y X W T B Y XW^T B YXWTB 定义输入M 个X变量&#xff0c;输出N个…...

aws服务(二)机密数据存储

在AWS&#xff08;Amazon Web Services&#xff09;中存储机密数据时&#xff0c;安全性和合规性是最重要的考虑因素。AWS 提供了多个服务和工具&#xff0c;帮助用户确保数据的安全性、机密性以及合规性。以下是一些推荐的存储机密数据的AWS服务和最佳实践&#xff1a; 一、A…...

VMware Workstation 17.6.1

概述 目前 VMware Workstation Pro 发布了最新版 v17.6.1&#xff1a; 本月11号官宣&#xff1a;针对所有人免费提供&#xff0c;包括商业、教育和个人用户。 使用说明 软件安装 获取安装包后&#xff0c;双击默认安装即可&#xff1a; 一路单击下一步按钮&#xff1a; 等待…...

wordpress模板改适应手机/百度图片搜索入口

原文在于&#xff1a;北京交警微博...

wordpress友情链接导入/营销案例100例简短

1 web入门回顾 web入门 1&#xff09;web服务软件作用: 把本地资源共享给外部访问 2&#xff09;tomcat服务器基本操作 &#xff1a; 启动: %tomcat%/bin/startup.bat 关闭&#xff1a; %tomcat%/bin/shutdown.bat 访问tomcat主页&#xff1a; http://localhost:8080 3&a…...

模拟网站建设/辅导机构

Curator 原生的 Java API 开发存在的问题 会话连接是异步的&#xff0c;需要自己去处理。比如使用 CountDownLatchWatch 需要重复注册&#xff0c;不然就不能生效开发的复杂性还是比较高的不支持多节点删除和创建。需要自己去递归 Curator 是一个专门解决分布式锁的框架&#…...

泉州制作网站公司/宣传软文是什么

//求解一元多次方程&#xff0c;注意到"the interest rate will be no less than 0 and no larger than 1."//所以方程的输出是随着the value of i 严格增加&#xff0c;故可以采用二分查找方程的解#include<iostream>#include<stdio.h>#include<math…...

个人主页是指什么/seo外链推广

闰年分为普通闰年和世纪闰年&#xff1a; 普通闰年&#xff1a; 是4的倍数&#xff0c;但不是100的倍数&#xff1b; 世纪闰年&#xff1a; 是400的倍数&#xff1b;...

seo推广公司网站模板/网站排名优化推广

一个典型的逻辑业务&#xff1a;如图有三个维度&#xff1a;市场、产品、日期那么三个维度之间的交点&#xff0c;即坐标轴中的交点就是一个事实&#xff0c;比如现实生活中的一个购买过程。事实表&#xff1a;是多个维度表的交点&#xff0c;反过来说事实表中一行存储了一个事…...