html中一个div中平均分三个盒子

html中一个div中平均分三个盒子

html中一个div中平均分三个盒子,大小自适应,随着界面的大小而改变大小
1、截图展示
在这里插入图片描述
2.代码部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0; /* 重置默认的body边距 */
    }

    .container {
      display: flex;
      justify-content: space-between;
      border: 3px solid #D4E3FC;
      border-radius: 10px;
      padding: 20px; /* 添加上下左右相等的边距 */
      box-sizing: border-box; /* 让padding不会撑大容器 */
      overflow: hidden; /* 用于清除浮动,防止子元素溢出 */
    }

    .box {
      width: calc(33.33% - 20px); /* 三个盒子平分容器宽度,并留出间隙 */
      box-sizing: border-box; /* 防止盒子宽度溢出 */
      background-color: blue; /* 设置盒子颜色为蓝色 */
      margin-bottom: 20px; /* 间隙的高度,可根据需要调整 */
    }

    .monitor {
      height: 100px; /* 设置盒子高度 */
    }
  </style>
  <title>Three Boxes in Container</title>
</head>
<body>
  <div class="container" id="boxContainer">
    <div class="box">
      <div class="monitor">
        <!-- 内容 -->
      </div>
    </div>
    <div class="box">
      <div class="monitor">
        <!-- 内容 -->
      </div>
    </div>
    <div class="box">
      <div class="monitor">
        <!-- 内容 -->
      </div>
    </div>
  </div>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

QT使用SQLite 超详细(增删改查、包括对大量数据快速存储和更新)

QTSQLite 在QT中使用sqlite数据库&#xff0c;有多种使用方法&#xff0c;在这里我只提供几种简单&#xff0c;代码简短的方法&#xff0c;包括一些特殊字符处理。在这里也给大家说明一下&#xff0c;如果你每次要存储的数据量很大&#xff0c;建议使用事务&#xff08;代码中…

老师的就业前景和发展

我常常被问到&#xff0c;“老师的就业前景和发展怎么样&#xff1f;”作为一名老师&#xff0c;我必须承认&#xff0c;教育行业的就业前景和发展并不是特别乐观。但是&#xff0c;这并不意味着没有机会&#xff0c;也不意味着我们不能为自己的未来做出规划。 教育行业的发展趋…

智能无人零售:革新零售消费体验的未来

智能无人零售&#xff1a;革新零售消费体验的未来 在当今数字化时代&#xff0c;智能无人零售正以惊人的速度改变着我们的购物方式和消费体验。这一新兴领域的发展&#xff0c;为消费者带来了前所未有的便利和个性化选择。 智能无人零售是指利用先进的智能技术和自动化系统&…

基于SSH的java记账管理系统

基于SSH的java记账管理系统 一、系统介绍二、功能展示四、其他系统实现五、获取源码 一、系统介绍 项目类型&#xff1a;Java EE项目 项目名称&#xff1a;基于SSH的记账管理系统 项目架构&#xff1a;B/S架构 开发语言&#xff1a;Java语言 前端技术&#xff1a;HTML、CS…

空间运算设备-Apple Vision Pro

苹果以其在科技领域的创新而闻名&#xff0c;他们致力于推动技术的边界&#xff0c;这在他们的产品中表现得非常明显。他们尝试开发一项的新型突破性显示技术。在 2023 年 6 月 5 日官网宣布将发布 Apple Vision Pro 头戴空间设备&#xff0c;我们一起来了解一下 Apple Vision …

如何选择合适的运筹优化求解器?

文章目录 前言求解器对比问题延伸&#xff1a;商用求解器和开源求解器的差别是什么&#xff1f; 求解器PK总结参考资料 前言 求解器对于运筹算法工程师而言&#xff0c;常常像一个黑盒&#xff0c;我们扔进去输入数据和数学模型&#xff0c;求解器给我们吐出一个解出来。这种状…

2023年山东省职业院校技能大赛信息安全管理与评估二三阶段样题

2023年山东省职业院校技能大赛信息安全管理与评估二三阶段 样题 第二阶段 模块二 网络安全事件响应、数字取证调查、应用程序安全 一、竞赛内容 Geek极安云科专注技能竞赛技术提升&#xff0c;基于各大赛项提供全面的系统性培训&#xff0c;拥有完整的培训体系。团队拥有曾…

Ignis - Interactive Fire System

Ignis - 点火、蔓延、熄灭、定制! 全方位火焰系统。 这个插件在21年的项目中使用过很好用值使用概述 想玩火吗?如果想的话,那么Ignis就是你的最佳工具。有了Ignis,你可以把任何物体、植被或带皮带骨的网状物转换为可燃物体,它就会自动着火。然后,火焰可以蔓延,点燃其他物…

如何在Android平板上远程连接Ubuntu服务器使用code-server代码开发

目录 1.ubuntu本地安装code-server 2. 安装cpolar内网穿透 3. 创建隧道映射本地端口 4. 安卓平板测试访问 5.固定域名公网地址 6.结语 1.ubuntu本地安装code-server 准备一台虚拟机,Ubuntu或者centos都可以&#xff0c;这里以VMwhere ubuntu系统为例 下载code server服务…

怎么将用户引流到你的私域中?

微信私域运营是一种利用微信平台建立与用户深度联系的营销方式&#xff0c;可在私域中触达并服务用户。 那么如何将在将用户引流至你的私域中呢&#xff1f; 可以从以下几个小方法入手。 ①打造一个吸引人的个人品牌形象非常重要。在社交媒体上展示真实、独特、专业的一面&a…

C/C++端口复用SO_REUSEADDR(setsockopt参数),test ok

端口复用最常用的用途应该是防止服务器重启时之前绑定的端口还未释放或者程序突然退出而系统没有释放端口。这种情况下如果设定了端口复用&#xff0c;则新启动的服务器进程可以直接绑定端口。如果没有设定端口复用&#xff0c;绑定会失败&#xff0c;提示ADDR已经在使用中——…

C# 语法笔记

1.ref、out&#xff1a;参数传递的两种方式 ref&#xff1a;引用传递 using System; namespace CalculatorApplication {class NumberManipulator{public void swap(ref int x, ref int y){int temp;temp x; /* 保存 x 的值 */x y; /* 把 y 赋值给 x */y temp; /* 把 t…

巧用静默,原来真的可以告警零误报!

前言 在当今的信息技术环境中&#xff0c;系统的稳定性和安全性至关重要。然而&#xff0c;在进行计划内的升级维护时&#xff0c;监控系统往往会产生大量的误报警告&#xff0c;给运维人员带来不必要的困扰。为了解决这一问题&#xff0c;组织可以通过合理设置静默规则&#…

如何选择 Facebook 代理?

Facebook上从事业务推广、广告或资料推广以及群组的用户需要高质量且可靠的代理。使用代理&#xff0c;用户可以在账号被封锁的情况下访问自己的资料&#xff0c;同时与多人进行即时通信&#xff0c;并能够&#xff1a; 自动发送邀请参加各种活动&#xff1b; 通过特殊的机器人…

中国开源大模型登顶HuggingFace排行榜

12月8日消息&#xff0c;全球最大的开源大模型社区HuggingFace日前公布了最新的开源大模型排行榜&#xff0c;阿里云通义千问力压Llama2等国内外开源大模型登顶榜首。 HuggingFace的开源大模型排行榜&#xff08;Open LLM Leaderboard&#xff09;是目前大模型领域最具权威性的…

SpringAMQP 快速入门

SpringAMQP 快速入门 1. 创建项目2. 快速入门2.2.1 消息发送2.2.2 消息接收 3. 交换机3.1 Fanout Exchange&#xff08;扇出交换机&#xff09;3.1.1 创建队列与交换机3.1.2 消息接收3.1.3 消息发送 3.2 Direct Exchange&#xff08;直连交换机&#xff09;3.2.1 创建交换机与队…

❤ Mac IDEA使用并运行项目

❤ IDEA导入项目并运行 Mac IDEA使用 (1) 仓库导入 通过获取giett仓库包的url&#xff0c;在idea中导入项目 在gitee里获取项目的ur打开idea&#xff0c;点击 File->new->Project from Version Control (2) 创建数据库ry并导入数据脚本 &#xff08;3&#xff09;修改配…

JOSEF 单稳态中间继电器 UEG/A-4H-L DC110V 导轨安装

系列型号 UEG/A-2H2D中间继电器UEG/A-4H4D中间继电器UEG/A-2D中间继电器 UEG/A-2H中间继电器UEG/A-4H中间继电器UEG/A-4D中间继电器 UEG/A-6H中间继电器UEG/A-6D中间继电器UEG/A-8H中间继电器 UEG/A-10D中间继电器UEG/A-10H中间继电器UEG/A-2DPDT中间继电器 UEG/A-4DPDT中…

用网安技术去合法挖漏洞,一个月能拿多少钱?想不到吧!

学会网安技术后去挖漏洞一个月能搞多少外快&#xff1f; 现在很多白帽子都是白天上班晚上挖洞&#xff0c;甚至有的人连班都不想上&#xff0c;纯靠挖漏洞来收入&#xff0c;比如说补天上面的这些人&#xff0c;每个月收入较高的都是他们&#xff0c;八成都是在家全职挖洞了。…

echarts绘制一个环形图2

其他echarts&#xff1a; echarts绘制一个环形图 echarts绘制一个柱状图&#xff0c;柱状折线图 echarts绘制一个饼图 效果&#xff1a; 组件代码&#xff1a; <template><div class"wrapper"><div ref"doughnutChart2" id"dough…