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

当大的div中有六个小的div，上面三个下面三个，当外层div高变大的时候我希望里面的小的div的高也变大

news 2026/1/3 12:00:31

问：

当大的div中有六个小的div，上面三个下面三个，当外层div高变大的时候我希望里面的小的div的高也变大

回答：

这时候我们就不能写死六个小的div的高度，否则上下的小的div的间距就会变大，因为他们的高度固定了，我们需要将小的div的高度不固定才能让小的div的高度跟随外层div的高度增高而增高。

源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flexbox Layout</title><style>body, html {height: 100%;margin: 0;display: flex;justify-content: center;align-items: center;}.outer-container {display: flex;flex-direction: column;flex-wrap: wrap;height: 80vh; /* 设置外层盒子的高度，可以根据需要调整 */width: 80vw; /* 设置外层盒子的宽度，可以根据需要调整 */border: 1px solid #000;box-sizing: border-box;}.inner-box {flex: 1 1 30%; /* 设置内部盒子的弹性比例和基准大小 */margin: 5px; /* 设置内部盒子的间距 */background-color: #f0f0f0;display: flex;justify-content: center;align-items: center;box-sizing: border-box;}@media (min-height: 500px) {.outer-container {flex-direction: row;flex-wrap: wrap;}.inner-box {flex: 1 1 45%; /* 设置内部盒子的弹性比例和基准大小 */}}</style>
</head>
<body><div class="outer-container"><div class="inner-box">Box 1</div><div class="inner-box">Box 2</div><div class="inner-box">Box 3</div><div class="inner-box">Box 4</div><div class="inner-box">Box 5</div><div class="inner-box">Box 6</div></div>
</body>
</html>

相关文章：

当大的div中有六个小的div，上面三个下面三个，当外层div高变大的时候我希望里面的小的div的高也变大

问&#xff1a; 当大的div中有六个小的div&#xff0c;上面三个下面三个&#xff0c;当外层div高变大的时候我希望里面的小的div的高也变大 回答&#xff1a; 这时候我们就不能写死六个小的div的高度&#xff0c;否则上下的小的div的间距就会变大&#xff0c;因为他们的高度…...

编程日记 2024/12/5 8:58:22

MySQL——操作

一.库的操作 1.基本操作 创建数据库 create database 数据库名称; 查看数据库 show databases; 删除数据库 drop database 数据库名称; 执行删除之后的结果: 数据库内部看不到对应的数据库 对应的数据库文件夹被删除&#xff0c;级联删除&#xff0c;里面的数据表全部被删…...

编程日记 2024/12/5 8:57:19

Python语法之正则表达式详解以及re模块中的常用函数

正则表达式详解及re模块中的常用函数 概念、作用和步骤 概念&#xff1a; 本身也是一个字符串&#xff0c;其中的字符具有特殊含义&#xff0c;将来我们可以根据这个字符串【正则表达式】去处理其他的字符串&#xff0c;比如可以对其他字符串进行匹配&#xff0c;切分&#xf…...

编程日记 2024/12/5 8:56:18

《地球化学》

《地球化学》主要报道近代地球化学, 特别是其主要分支学科, 如岩石地球化学、元素地球化学、有机地球化学、环境地球化学、矿床地球化学、实验地球化学、生物地球化学、天体化学、计算地球化学、分析地球化学、海洋地球化学、沉积地球化学、纳米地球化学、油气地球化学和同位素…...

编程日记 2024/12/5 8:55:15

alpine openssl 编译

./config no-shared --prefix/usr/local/openssl apk add musl-dev gcc g apk add linux-headers ssh root 登录 编辑 SSH 配置文件 打开 SSH 配置文件 /etc/ssh/sshd_config&#xff1a; vi /etc/ssh/sshd_config PermitRootLogin yes...

编程日记 2024/12/5 8:54:14

【AI模型对比】AI新宠Kimi与ChatGPT的全面对比：技术、性能、应用全揭秘

文章目录 Moss前沿AI技术背景Kimi人工智能的技术积淀ChatGPT的技术优势 详细对比列表模型研发Kimi大模型的研发历程ChatGPT的发展演进 参数规模与架构Kimi大模型的参数规模解析ChatGPT的参数体系 模型表现与局限性Kimi大模型的表现ChatGPT的表现 结论&#xff1a;如何选择适合自…...

编程日记 2024/12/5 8:51:11

【C#设计模式(17)——迭代器模式(Iterator Pattern)】

前言 迭代器模式可以使用统一的接口来遍历不同类型的集合对象&#xff0c;而不需要关心其内部的具体实现。 代码 //迭代器接口 public interface Iterator {bool HashNext();object Next(); } //集合接口 public interface Collection {Iterator CreateIterator(); } //元素迭…...

编程日记 2024/12/5 8:50:10

二、部署docker

二、安装与部署 2.1 安装环境概述 Docker划分为CE和EE&#xff0c;CE为社区版&#xff08;免费&#xff0c;支持周期三个月&#xff09;&#xff0c;EE为企业版&#xff08;强调安全&#xff0c;付费使用&#xff09;。 Docker CE每月发布一个Edge版本&#xff08;17.03&…...

编程日记 2024/12/5 8:49:07

FFmpeg 4.3 音视频-多路H265监控录放C++开发十九，ffmpeg封装

封装就是将 一个h264&#xff0c;和一个aac文件重新封装成一个mp4文件。 这里我们的h264 和 aac都是来源于另一个mp4文件&#xff0c;也就是说&#xff0c;我们会将 in.mp4文件解封装成一路videoavstream 和 一路 audioavstream&#xff0c;然后 将这两路的 avstream 合并成一…...

编程日记 2024/12/5 8:47:04

ML 系列：第 39 节 - 估计方法：最大似然估计 (MLE)

目录 一、说明 二、什么是最大似然估计 (MLE)&#xff1f; 2.1 理解公式 2.2 MLE 的定义 2.3 我们何时使用 MLE&#xff1f; 三、结论 一、说明 在统计学领域&#xff0c;我们经常需要根据观察到的数据估计统计模型的参数。为此目的广泛使用的两种关键方法是最大似然估计 ( MLE…...

编程日记 2024/12/5 8:45:01

Linux 权限管理：用户分类、权限解读与常见问题剖析

&#x1f31f; 快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。&#x1f31f; &#x1f6a9;用通俗易懂且不失专业性的文字&#xff0c;讲解计算机领域那些看似枯燥的知识点&#x1f6a9; 目录 &#x1f4af;L…...

编程日记 2024/12/5 8:41:58

网络原理之 UDP 协议

目录 1. UDP 协议报文格式 2. UDP 的特点 (1) 无连接 (2) 不可靠 (3) 面向数据报 (4) 全双工 3. 基于 UDP 的应用层协议 前文是&#xff1a;UDP 的使用 首先了解一下基础知识&#xff1a; 1. UDP 协议报文格式 传输层最重要的协议有两个&#xff0c;一个是 TCP&#x…...

编程日记 2024/12/5 8:35:52

并发框架disruptor实现生产-消费者模式

Disruptor是LMAX公司开源的高性能内存消息队列&#xff0c;单线程处理能力可达600w订单/秒。本文将使用该框架实现生产-消费者模式。一、框架的maven依赖 <!-- https://mvnrepository.com/artifact/com.lmax/disruptor --><dependency><groupId>com.lmax<…...

编程日记 2024/12/5 8:31:48

【Vivado】xdc约束文件编写

随手记录一下项目中学到的约束文件编写技巧。 时序约束 创建生成时钟 参考链接&#xff1a; Vivado Design Suite Tcl Command Reference Guide (UG835) Vivado Design Suite User Guide: Using Constraints (UG903) 通过Clocking Wizard IP创建的时钟&#xff08;MMCM或…...

编程日记 2024/12/5 8:30:47

Redis使用场景-缓存-缓存雪崩

前言 之前在针对实习面试的博文中讲到Redis在实际开发中的生产问题&#xff0c;其中缓存穿透、击穿、雪崩在面试中问的最频繁&#xff0c;本文加了图解&#xff0c;希望帮助你更直观的了解缓存雪崩&#x1f600; &#xff08;放出之前写的针对实习面试的关于Redis生产问题的博…...

编程日记 2024/12/5 8:28:44

概率论相关知识随记

作为基础知识的补充&#xff0c;随学随记&#xff0c;方便以后查阅。 概率论相关知识随记 期望&#xff08;Expectation&#xff09;期望的定义离散型随机变量的期望示例&#xff1a;掷骰子的期望 连续型随机变量的期望示例&#xff1a;均匀分布的期望 期望的性质线性性质期望的…...

编程日记 2024/12/5 8:27:43

【PlantUML系列】序列图（二）

目录 一、参与者 二、消息交互顺序 三、其他技巧 3.1 改变参与者的顺序 3.2 使用 as 重命名参与者 3.3 注释 3.4 页眉和页脚 一、参与者 使用 participant、actor、boundary、control、entity 和 database 等关键字来定义不同类型的参与者。例如&#xff1a; Actor&…...

编程日记 2024/12/5 8:26:40

WPF+MVVM案例实战与特效（三十四）- 日志管理：使用 log4net 实现高效日志记录

文章目录 1、概述2、日志案例实现1、LogHelper 类详解2、代码解释3、配置文件4、实际应用案例场景 1：记录系统运行日志场景 2：记录数据库操作日志场景 3：记录 HTTP 请求日志5、总结1、概述 在WPF软件开发中，良好的日志记录机制对于系统的调试、维护和性能优化至关重要。lo…...

编程日记 2024/12/5 8:25:39

前端测试框架 jasmine 的使用

最近的项目在使用AngulaJs,对JS代码的测试问题就摆在了面前。通过对比我们选择了 Karma jasmine ,使用 Jasmine做单元测试 &#xff0c;Karma 自动化完成&#xff0c;当然了如果使用 Karma jasmine 前提是必须安装 Nodejs。 安装好 Nodejs &#xff0c;使用 npm 安装好必要…...

编程日记 2024/12/5 8:24:38

Qwen2-VL视觉大模型微调实战：LaTex公式OCR识别任务（完整代码）

《SwanLab机器学习实战教程》是一个主打「开箱即用」的AI训练系列教程&#xff0c;我们致力于提供完善的数据集、源代码、实验记录以及环境安装方式&#xff0c;手把手帮助你跑起训练&#xff0c;解决问题。 Qwen2-VL是通义千问团队最近开源的大语言模型&#xff0c;由阿里云通…...

编程日记 2024/12/5 8:23:37

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2025/12/28 20:48:11

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/11/1 5:21:39

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/7/30 7:20:17

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2025/12/25 22:29:43

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

编程新知 2025/12/31 7:44:42

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2025/12/31 14:27:30

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

编程新知 2026/1/2 23:09:44