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

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

news 2025/9/21 12:32:33

问：

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

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2025/9/21 8:16:34

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2025/9/13 15:19:41

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/23 3:55:49

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2025/9/16 2:11:19

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2025/9/14 20:40:14

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2025/8/12 22:58:13

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

编程新知 2025/8/13 7:14:07

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2025/9/16 19:35:13