html 几行的空间分成3个区域

devtools/2024/9/23 5:59:25/

1.代码

html"><!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>三个区域示例</title>  
<style>  /* 设置整体容器样式 */  .container {  display: flex; /* 使用Flexbox布局 */  justify-content: space-between; /* 子元素之间的间隔相等 */  width: 100%; /* 容器宽度占满整个屏幕 */  }  /* 设置每个区域的样式 */  .region {  flex: 1; /* 每个区域都等宽 */  height: 200px; /* 你可以根据需要调整高度 */  background-color: #f0f0f0; /* 设置背景色以区分区域，实际使用时可以去除或修改 */  margin: 10px; /* 设置外边距，增加区域之间的间隔 */  padding: 20px; /* 设置内边距，增加区域内部的空间 */  box-sizing: border-box; /* 使得宽度和高度包括内边距和外边距 */  text-align: center; /* 文本居中显示 */  }  
</style>  
</head>  
<body>  <div class="container">  <div class="region">区域 1</div>  <div class="region">区域 2</div>  <div class="region">区域 3</div>  
</div>  </body>  
</html>

2.效果

在这里插入图片描述


http://www.ppmy.cn/devtools/115843.html

相关文章

LeetcodeLCR 116. 省份数量

LeetcodeLCR 116. 省份数量

文章目录 题目原题链接思路C代码 题目 原题链接 LCR 116. 省份数量 思路 利用并查集的思想&#xff0c;将连接的诚实放在一个集合当中&#xff0c;最后遍历并查集数组判断有几颗树 初始化一个并查集&#xff1b;将连通的城市合并&#xff1b;统计并查集中树的个数&#xff1b…
阅读更多...
面试金典题8

面试金典题8

编写一种算法&#xff0c;若M N矩阵中某个元素为0&#xff0c;则将其所在的行与列清零。 示例 1&#xff1a; 输入&#xff1a; [[1,1,1],[1,0,1],[1,1,1] ] 输出&#xff1a; [[1,0,1],[0,0,0],[1,0,1] ]示例 2&#xff1a; 输入&#xff1a; [[0,1,2,0],[3,4,5,2],[1,3,1…
阅读更多...
828华为云征文|Flexus云服务器X实例部署宝塔运维面板

828华为云征文|Flexus云服务器X实例部署宝塔运维面板

本次华为云Flexus云服务器X实例部署宝塔运维面板教学&#xff0c;这次是推陈出新啊 之前的云耀云服务器L实例已经很不错了&#xff0c;大力赞叹华为云的 同时感谢华为云提供优惠卷&#xff0c;只能说白嫖真是太棒了 华为云近期正在筹办华为云828企业节活动&#xff0c;90款免…
阅读更多...
ubuntu22.04安装在触摸屏的电脑上，屏幕乱动的问题

ubuntu22.04安装在触摸屏的电脑上，屏幕乱动的问题

要获取触摸屏设备的名称&#xff0c;您可以通过 xinput 命令查看设备列表&#xff0c;并从中识别出触摸屏的名称。以下是获取设备名称的步骤&#xff1a; 1. 使用 xinput list 命令获取设备列表 在终端中运行以下命令&#xff1a; xinput list这会列出所有输入设备。输出中会…
阅读更多...
wordpress迁移到别的服务器

wordpress迁移到别的服务器

wordpress论坛网站搭建 于2023/11/16写的该文章 一-配置环境 配置LNMP&#xff08;linuxnginxmysqlphpphpmyadmin&#xff09;环境或者LAMP&#xff08;apache&#xff09; 可以选择集成了这些软件的套件 下载链接&#xff1a;https://www.xp.cn/download.html 手动下载这…
阅读更多...
408算法题leetcode--第12天

408算法题leetcode--第12天

19. 删除链表的倒数第 N 个结点 19. 删除链表的倒数第 N 个结点思路&#xff1a;注释中时间&#xff1a;O(n)&#xff1b;空间&#xff1a;O(1) /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), …
阅读更多...
python新手的五个练习题

python新手的五个练习题

代码 # 1. 定义一个变量my_Number,将其设置为你的学号&#xff0c;然后输出到终端。 my_Number "20240001" # 假设你的学号是20240001 print("学号:", my_Number) # 2. 计算并输出到终端:两个数(例如3和5)的和、差、乘积和商。 num1 3 num2 5 print(&…
阅读更多...
前端vue3打印，多页打印，不使用插件（工作中让我写一个打印功能）

前端vue3打印，多页打印，不使用插件（工作中让我写一个打印功能）

说下总体思路&#xff0c;创建一个组件&#xff0c;里面放多个span字段&#xff0c;然后根据父组件传入的参数&#xff0c;生成子组件&#xff0c;最好我们打印子组件的信息即可。通过我多次ai&#xff0c;探索最后成功了。 子组件代码 media print 这个我要讲一下&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023