CSS:九宫格布局

九宫格布局效果如下:
在这里插入图片描述
HTML 结构:

<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
</div>

公共 CSS:

.container {width: 310px;
}.item {text-align: center;			line-height: 100px;vertical-align: middle;		/*文字水平垂直居中 */width: 100px;height: 100px;background-color: orange;
}

方法一:float

.container {overflow: auto;		/*形成BFC以解决父元素高度塌陷 */ 
}.item {float: left;margin-right: 5px;margin-bottom: 5px;
}
.item:nth-of-type(3n) {			/*最后一列 */			margin-right: 0;
}
.item:nth-of-type(n+7) {		/*最后一行 */margin-bottom: 0;
}

方法二:flex

.container {display: flex;flex-wrap: wrap;		/*换行 */
}
.item {margin-right: 5px;margin-bottom: 5px;
}
.item:nth-of-type(3n) {					margin-right: 0;
}
.item:nth-of-type(n+7) {margin-bottom: 0;
}

如果容器和子项的宽都不固定,可以设置 item 样式为 { width: 30%; margin-right: 5%; }

如果子项之前间距固定,可以设置 item 样式为 { width: calc(calc(100% -10px) / 3); margin-right: 5px; }

方法三:grid

.container {display: grid;grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);grid-gap: 5px;
}

gird 布局不需要额外设置子项的宽高和外边距,如果想要自适应,可以设置 grid-template-columns: repeat(3, 1fr);

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

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

相关文章

bert+np.memap+faiss文本相似度匹配 topN

目录 任务 代码 结果说明 任务 使用 bert-base-chinese 预训练模型将文本数据向量化后&#xff0c;使用 np.memap 进行保存&#xff0c;再使用 faiss 进行相似度匹配出每个文本与它最相似的 topN 此篇文章使用了地址数据&#xff0c;目的是为了跑通这个流程&#xff0c;数…

TP框架 之think-auth权限认证

一、安装think-auth composer require 5ini99/think-auth二、数据表 -- ---------------------------- -- think_auth_rule&#xff0c;规则表&#xff0c; -- id:主键&#xff0c;name&#xff1a;规则唯一标识, title&#xff1a;规则中文名称 status 状态&#xff1a;为1正常…

SpringBoot:web开发

web开发demo&#xff1a;点击查看 LearnSpringBoot05Web 点击查看更多的SpringBoot教程 技术摘要 webjarsBootstrap模板引擎thymeleaf嵌入式Servlet容器注册web三大组件 一、webjars webjars官网 简介 简介翻译 WebJars 是打包到 JAR&#xff08;Java Archive&#xff09;…

ACK One Argo工作流:实现动态 Fan-out/Fan-in 任务编排

作者&#xff1a;庄宇 什么是 Fan-out Fan-in 在工作流编排过程中&#xff0c;为了加快大任务处理的效率&#xff0c;可以使用 Fan-out Fan-in 任务编排&#xff0c;将大任务分解成小任务&#xff0c;然后并行运行小任务&#xff0c;最后聚合结果。 由上图&#xff0c;可以使…

如何评估头抖的病情和治疗效果?

评估头抖的病情和治疗效果是一个综合性的过程&#xff0c;需要考虑多个方面&#xff0c;包括症状的严重程度、频率、持续时间&#xff0c;以及生活质量和心理状态的变化等。下面将从不同方面详细介绍如何评估头抖的病情和治疗效果。 一、病情评估 症状观察&#xff1a;首先&am…

文件处理工具类

一、引入依赖 <dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.30</version> </dependency> <dependency><groupId>org.apache.commons</groupId><arti…

在 Docker 中启动 ROS2 里的 rivz2 和 rqt 出现错误的解决方法

1. 出现错误&#xff1a; 运行 ros2 run rivz2 rivz2 &#xff0c;报错如下 &#xff1a; No protocol specified qt.qpa.xcb: could not connect to display :1 qt.qpa.plugin: Could not load the Qt platform plugin "xcb" in "" even though it was f…

Java Swing实现简易版项目代码统计

尝试用AI生成日常方便使用的代码程序 用文心一言生成的可用代码 (1)提示1 假如你是一个java程序员&#xff0c;请用java swing创建一个JFrame&#xff0c;显示一个JTextField显示路径&#xff0c;Jtextfield右侧添加一个JButton&#xff0c;下面添加一个JTextArea&#xff0c…

文档协作技术——Operational Transformations简单了解

OT是支持协作软件系统的一种广泛使用的技术。 OT通常使用副本文档储存&#xff0c;每个客户端都拥有对文档的副本。客户端在本地副本以无锁非堵塞方式操作&#xff0c;并将改变传递到其他客户端。当客户端收到其他客户端传播的改变之后&#xff0c;通过转换应用更改&#xff0…

【前端web入门第四天】03 显示模式+综合案例热词与banner效果

文章目录: 1. 显示模式 1.1 块级元素,行内元素,行内块元素 1.2 转换显示模式 综合案例 综合案例一 热词综合案例二 banner效果 1. 显示模式 什么是显示模式 标签(元素)的显示方式 标签的作用是什么? 布局网页的时候&#xff0c;根据标签的显示模式选择合适的标签摆放内容。…

揭秘备忘录模式:打造灵活高效的状态管理解决方案

备忘录模式&#xff08;Memento Pattern&#xff09;是一种行为设计模式&#xff0c;它允许在不暴露对象内部状态的情况下捕获和恢复对象的内部状态。这种模式主要用于实现撤销操作。 在 Java 中&#xff0c;备忘录模式通常包括以下三个角色&#xff1a; 发起人&#xff08;O…

leetcode 1539.第k个缺失的正整数

这个题作者就当作是练习C的STL容器来做的&#xff0c;也就是暴力硬解吧。 思路&#xff1a;按照数据范围&#xff0c;我们再创造一个全集&#xff0c;利用差集的概念来求出来arr所没有的元素&#xff0c;放到结果数组里面&#xff0c;然后再对位置进行筛选。 注意&#xff1a…

vue3:25—其他API

目录 1、shallowRef和shallowReactive 2、readonly与shallowReadonly readonly shallowReadonly 3、toRaw和markRaw toRaw markRaw 4、customRef 1、shallowRef和shallowReactive shallowRef 1.作用:创建一个响应式数据&#xff0c;但只对顶层属性进行响应式处理。2…

代码随想录算法训练营第13天—二叉树02 | ● *层序遍历(对应10道题) ● *226.翻转二叉树 ● 101.对称二叉树

*层序遍历&#xff08;二叉树的广度优先搜索&#xff0c;对应10道题&#xff09; 102.二叉树的层序遍历(opens new window) 107.二叉树的层次遍历II(opens new window) 199.二叉树的右视图(opens new window) 637.二叉树的层平均值(opens new window)斜体样式 429.N叉树的层序…

Windows 安装 MySQL 最新最简教程

Windows 安装 MySQL 最新最简教程 官网地址 https://dev.mysql.com/downloads/mysql/下载 MySQL zip 文件 配置 MySQL1、解压文件 2、进入 bin 目录 搜索栏输入 cmd 回车进入命令行 C:\Users\zhong\Desktop\MySQL\mysql-8.3.0-winx64\mysql-8.3.0-winx64\bin 注意这里是你自己…

JUnit实践教程——Java的单元测试框架

前言 大家好&#xff0c;我是chowley&#xff0c;最近在学单元测试框架——JUnit&#xff0c;写个博客记录一下&#xff01; 在软件开发中&#xff0c;单元测试是确保代码质量和稳定性的重要手段之一。JUnit作为Java领域最流行的单元测试框架&#xff0c;为开发人员提供了简单…

std::vector<cv::Mat>和unsigned char** in_pixels 互相转换

将std::vectorcv::Mat转换为unsigned char** in_pixels&#xff0c; std::vector<cv::Mat> matVector; // 假设已经有一个包含cv::Mat的vector// 创建一个二维数组&#xff0c;用于存储像素数据 unsigned char** in_pixels new unsigned char*[matVector.size()]; for …

(2)(2.14) SPL Satellite Telemetry

文章目录 前言 1 本地 Wi-Fi&#xff08;费用&#xff1a;30 美元以上&#xff0c;范围&#xff1a;室内&#xff09; 2 蜂窝电话&#xff08;费用&#xff1a;100 美元以上&#xff0c;范围&#xff1a;蜂窝电话覆盖区域&#xff09; 3 手机卫星&#xff08;费用&#xff…

JS - 处理元素滚动

业务功能中时常有元素滚动的功能&#xff0c;现在就总结一下一些常用的事件。 一、定位滚动元素 做一切滚动操作之前都应该先定位到滚动元素&#xff0c;再做其他操作&#xff0c;如滚动顶部&#xff0c;获取滚动距离、禁止滚动等。 把以下代码复制粘贴到浏览器 Console 面板…

IT行业顶级证书:助力职业生涯的制胜法宝

IT行业顶级证书&#xff1a;助力职业生涯的制胜法宝 在IT行业&#xff0c;拥有一系列高含金量的证书是事关职业生涯发展的关键。这些证书不仅是技能的象征&#xff0c;更是在激烈的市场竞争中脱颖而出的法宝。让我们一起揭晓在中国IT行业中&#xff0c;哪些证书是最具含金量的…