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

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

news 2026/5/23 0:51:13

问：

当大的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

C++学习笔记23：const 成员函数

目录 一、为什么需要 const 成员函数&#xff1f; 二、const 成员函数的写法 三、const 修饰的到底是什么&#xff1f; 四、const 成员函数不能修改成员变量 五、const 对象和普通对象的调用规则 1. const 对象只能调用 const 成员函数 2. 普通对象可以调用 const 成员函…...

编程新知 2026/5/23 0:46:25

中性点不接地系统或中性点经消弧线圈接地系统的小电流接地故障仿真研究（Simulink仿真实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 &#x1f381…...

编程新知 2026/5/23 0:39:58

DeepSeek V2多模态支持真相（官方未公开的API隐藏能力全披露）

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;DeepSeek V2多模态支持真相&#xff08;官方未公开的API隐藏能力全披露&#xff09; DeepSeek V2 官方文档明确声明为纯文本大模型&#xff0c;但逆向分析其生产环境 API 流量与响应头后发现&#xff1a;其底…...

编程新知 2026/5/22 23:35:56

企业级Sora 2 API接入终极 checklist：23项必检项（含AWS/Azure/GCP三云环境差异对照表）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;企业级Sora 2 API接入终极 checklist&#xff1a;23项必检项&#xff08;含AWS/Azure/GCP三云环境差异对照表&#xff09; 接入企业级 Sora 2 API 前&#xff0c;必须完成覆盖身份认证、网络策略、合规…...

编程新知 2026/5/22 23:35:49

DS4Windows终极指南：如何让PlayStation手柄在Windows上完美运行

DS4Windows终极指南&#xff1a;如何让PlayStation手柄在Windows上完美运行 【免费下载链接】DS4Windows Like those other ds4tools, but sexier 项目地址: https://gitcode.com/gh_mirrors/ds/DS4Windows 想在Windows电脑上畅玩所有游戏&#xff0c;却只有PlayStation…...

编程新知 2026/5/22 23:00:41

机器学习赋能粒子物理全局拟合：破解B介子衰变反常之谜

1. 项目概述&#xff1a;当粒子物理遇上机器学习 如果你在粒子物理领域&#xff0c;特别是味物理和超出标准模型&#xff08;BSM&#xff09;物理的探索前线工作过&#xff0c;那么对“全局拟合”这个词一定不会陌生。它就像是我们理论家和实验家之间的翻译官&#xff0c;把对撞…...

编程新知 2026/5/22 22:54:29

m4s-converter：3步解锁B站缓存视频的跨平台免费工具

m4s-converter&#xff1a;3步解锁B站缓存视频的跨平台免费工具 【免费下载链接】m4s-converter 一个跨平台小工具&#xff0c;将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 你是否曾因B站视频突然下架而感到…...

编程新知 2026/5/22 21:48:58

平均 CPU 利用率指标为何该摒弃？多个案例揭示真相！

1. 作者信息与文章背景Jeremy Theocharis 是《平凡即卓越》作者、UMH 联合创始人兼首席技术官。文章基于其在 2026 年 4 月云原生亚琛聚会上的演讲&#xff0c;探讨为何应摒弃平均 CPU 利用率指标。2. 应用程序问题引出我们应用程序中的一个 Go 函数在生产环境总是被取消执行。…...

编程新知 2026/5/22 21:40:52

Cursor Pro激活工具深度解析：机器ID重置与多账户管理的技术实现

Cursor Pro激活工具深度解析&#xff1a;机器ID重置与多账户管理的技术实现 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached…...

编程新知 2026/5/22 20:39:56

Barlow字体完整指南：如何用54种样式提升你的设计专业度

Barlow字体完整指南&#xff1a;如何用54种样式提升你的设计专业度 【免费下载链接】barlow Barlow: a straight-sided sans-serif superfamily 项目地址: https://gitcode.com/gh_mirrors/ba/barlow Barlow是一款专为现代设计而生的开源字体家族&#xff0c;以其独特的…...

编程新知 2026/5/22 18:57:08