前端html中让两个或者多个div在一行显示,用style给div加上css样式

文章目录

  • 前言
  • 一、怎么让多个div在一行显示


前言

DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。DIV在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。
我们知道,默认情况下每个div都是单独一行显示的,那么怎么让多个div在一行显示呢?


一、怎么让多个div在一行显示

<div style="display:flex;font-weight:bold ">图示:</div>
<div style="display:flex;font-weight:bold "><div style="float: left;margin-right: 38px;">格口:</div><div style="background:#7ea9dc;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div><div style="float: left;margin-right: 15px;">正常</div><div style="background:gray;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div><div style="float: left;margin-right: 15px;">禁用</div><div style="background:orange;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div><div style="float: left;margin-right: 15px;">集包</div><div style="background:red;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div><div style="float: left;margin-right: 15px;">故障</div><div style="background:yellow;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div><div style="float: left;margin-right: 15px;">装货量</div>
</div>
<div style="display:flex;font-weight:bold"><div style="float: left;margin-right: 38px;">小车:</div><div style="background:#44FF8C;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div><div style="float: left;margin-right: 15px;">正常</div><div style="background:red;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div><div style="float: left;margin-right: 15px;">故障</div>
</div>
<div style="display:flex;font-weight:bold"><div style="float: left;margin-right: 20px;">供件台 :</div><div style="background:#44ff8c;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div><div style="float: left;margin-right: 15px;">运行</div><div style="background:#b195d2;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div><div style="float: left;margin-right: 15px;">待机</div><div style="background:red;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div><div style="float: left;margin-right: 15px;">故障</div></div>
<div style="display:flex;font-weight:bold"><div style="float: left;margin-right: 10px;">直线电机:</div><div style="background:#44FF8C;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div><div style="float: left;margin-right: 15px;">正常</div><div style="background:orange;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div><div style="float: left;margin-right: 15px;">告警</div><div style="background:red;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div><div style="float: left;margin-right: 15px;">故障</div>
</div>
<div style="display:flex;font-weight:bold"><div style="float: left;margin-right: 38px;">紧停:</div><div style="background:gold;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div><div style="float: left;margin-right: 15px;">正常</div><div style="background:red;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div><div style="float: left;margin-right: 15px;">按下</div></div>
<div style="display:flex;font-weight:bold"><div style="float: left;margin-right: 38px;">电刷:</div><div style="background:#44FF8C;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div><div style="float: left;margin-right: 15px;">正常</div><div style="background:red;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div><div style="float: left;margin-right: 15px;">故障</div>
</div>
<div style="display:flex;font-weight:bold"><div style="float: left;margin-right: 20px;">灰度仪 :</div><div style="background:#44FF8C;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div><div style="float: left;margin-right: 15px;">正常</div><div style="background:red;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div><div style="float: left;margin-right: 15px;">故障</div>
</div>

显示结果:
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

概念、框架简介--ruoyi学习(一)

开始进行ruoyi框架的学习&#xff0c;比起其他的前后端不分离的&#xff0c;这个起码看的清晰一些吧。 这一节主要是看了ruoyi的官方文档后&#xff0c;记录了以下不懂的概念&#xff0c;并且整理了ruoyi框架中的相关内容。 一些概念 前端 store store是状态管理库&#x…

数值线性代数: 共轭梯度法

本文总结线性方程组求解的相关算法&#xff0c;特别是共轭梯度法的原理及流程。 零、预修 0.1 LU分解 设&#xff0c;若对于&#xff0c;均有&#xff0c;则存在下三角矩阵和上三角矩阵&#xff0c;使得。 设&#xff0c;若对于&#xff0c;均有&#xff0c;则存在唯一的下三…

中科院放大招:FastSAM快速细分任何东西

FastSAM是一个用于图像分割的快速模型&#xff0c;它是对SAM&#xff08;Segment Anything Model&#xff09;模型的改进和优化。FastSAM模型的目标是提高计算效率&#xff0c;使得图像分割任务能够更快地完成。 FastSAM模型的优势主要体现在以下几个方面&#xff1a; 快速性…

【Linux进程篇】进程概念(1)

【Linux进程篇】进程概念&#xff08;1&#xff09; 目录 【Linux进程篇】进程概念&#xff08;1&#xff09;进程基本概念描述进程-PCBtask_struct-PCB的一种task_ struct内容分类 组织进程查看进程通过系统调用获取进程标示符通过系统调用创建进程——fork初识 作者&#xff…

【Docker】Docker应用部署之Docker容器安装Redis

目录 一、搜索Redis镜像 二、拉取Redis镜像 三、创建容器 四、测试使用 一、搜索Redis镜像 docker search redis 二、拉取Redis镜像 docker pull redis:版本号 # 拉取对应版本的redis镜像 eg: docker pull redis:5.0 三、创建容器 docker run -id --nameredis -p 6379:637…

Games101学习笔记 - 变换矩阵基础

二维空间下的变换 缩放矩阵 缩放变换: 假如一个点&#xff08;X,Y&#xff09;。x经过n倍缩放&#xff0c;y经过m倍缩放&#xff0c;得到的新点&#xff08;X1&#xff0c;Y1&#xff09;&#xff1b;那么新点和远点有如下关系&#xff0c;X1 n*X, Y1 m*Y写成矩阵就是如下…

ChatGPT与高等教育变革:价值、影响及未来发展

最近一段时间&#xff0c;ChatGPT吸引了社会各界的目光&#xff0c;它可以撰写会议通知、新闻稿、新年贺信&#xff0c;还可以作诗、写文章&#xff0c;甚至可以撰写学术论文。比尔盖茨、马斯克等知名人物纷纷为此发声&#xff0c;谷歌、百度等知名企业纷纷宣布要提供类似产品。…

玩转Tomcat:从安装到部署

文章目录 一、什么是 Tomcat二、Tomcat 的安装与使用2.1 下载安装2.2 目录结构2.3 启动 Tomcat 三、部署程序到 Tomcat3.1 Windows环境3.2 Linux环境 一、什么是 Tomcat 一看到 Tomcat&#xff0c;我们一般会想到什么&#xff1f;没错&#xff0c;就是他&#xff0c;童年的回忆…

安全基础 --- html标签 + 编码

html标签 &#xff08;1&#xff09;detail标签 <details>标签用来折叠内容&#xff0c;浏览器会折叠显示该标签的内容。 <1> 含义&#xff1a; <details> 这是一段解释文本。 </details> 用户点击这段文本&#xff0c;折叠的文本就会展开&#x…

【云原生】Docker容器资源限制(CPU/内存/磁盘)

目录 ​编辑 1.限制容器对内存的使用 2.限制容器对CPU的使用 3.block IO权重 4.实现容器的底层技术 1.cgroup 1.查看容器的ID 2.在文件中查找 2.namespace 1.Mount 2.UTS 3.IPC 4.PID 5.Network 6.User 1.限制容器对内存的使用 ⼀个 docker host 上会运⾏若⼲容…

平面设计软件都有哪些?推荐这7款

优秀的平面广告设计可以给产品带来良好的效益&#xff0c;正确传播品牌的价值和色调&#xff0c;而功能强大、使用方便的平面广告设计软件是创造优秀平面广告设计的关键。本文推荐7款备受好评的平面广告设计软件&#xff0c;易于使用&#xff01; 1.即时设计 即时设计是国内一…

Bug记录: CUDA error_ device-side assert triggered

Bug记录&#xff1a; CUDA error: device-side assert triggered 在接触AIGC算法的过程中偶尔会遇到这样的bug&#xff1a;RuntimeError: CUDA error: device-side assert triggered return torch._C._cuda_synchronize() RuntimeError: CUDA error: device-side assert trig…

python在不同坐标系中绘制曲线

文章目录 平面直角坐标系空间直角坐标系极坐标地理坐标 平面直角坐标系 回顾我们的数据可视化的学习历程&#xff0c;其实始于笛卡尔坐标系的创建&#xff0c;并由此建立了数与形的对应关系。在笛卡尔坐标系中随便点上一点&#xff0c;这个点天生具备坐标&#xff0c;从而与数…

CloudDriver一款将各种网盘云盘挂在到电脑本地变成本地磁盘的工具 教程

平时我们的电脑可能由于大量的文件资料之类的导致存储空间可能不够&#xff0c;所以我们可以选择将网盘我们的本地磁盘用来存放东西。 CloudDrive 是一款可以将 115、阿里云盘、天翼云盘、沃家云盘、WebDAV 挂载到电脑中&#xff0c;成为本地硬盘的工具&#xff0c;支持 Window…

短视频平台视频怎么去掉水印?

短视频怎么去水印&#xff0c;困扰很多人&#xff0c;例如&#xff0c;有些logo水印&#xff0c;动态水印等等&#xff0c;分享操作经验&#xff1a; 抖音作为中国最受欢迎的社交娱乐应用程序之一&#xff0c;已成为许多人日常生活中不可或缺的一部分。在使用抖音过程中&#x…

数据结构--基础知识

数据结构是什么&#xff1f; 数据结构是计算机科学中研究数据组织、存储和管理的方法和原则。它涉及存储和操作数据的方式&#xff0c;以便能够高效地使用和访问数据。 相关内容 基本组成 数组&#xff08;Array&#xff09;&#xff1a;数组是一种线性数据结构&#xff0c;…

K8S暴露pod内多个端口

K8S暴露pod内多个端口 一、背景 公司统一用的某个底包跑jar服务&#xff0c;只暴露了8080端口 二、需求 由于有些服务在启动jar服务后&#xff0c;会启动多个端口&#xff0c;除了8080端口&#xff0c;还有别的端口需要暴露&#xff0c;我这里就还需要暴露9999端口。 注&a…

matlab进阶:求解在约束条件下的多元目标函数最值(fmincon函数详解)

&#x1f305;*&#x1f539;** φ(゜▽゜*)♪ **&#x1f539;*&#x1f305; 欢迎来到馒头侠的博客&#xff0c;该类目主要讲数学建模的知识&#xff0c;大家一起学习&#xff0c;联系最后的横幅&#xff01; 喜欢的朋友可以关注下&#xff0c;私信下次更新不迷路&#xff0…

Vue 基础语法(二)

一、背景&#xff1a; 我们对于基础语法&#xff0c;说白了就是实现元素赋值&#xff0c;循环&#xff0c;判断&#xff0c;以及事件响应即可&#xff01; 二、v-bind 我们已经成功创建了第一个 Vue 应用&#xff01;看起来这跟渲染一个字符串模板非常类似&#xff0c;但是 V…

vue中在使用keep-alive时,会出现在页面跳转后el-tooltip或el-dropdown不消失的问题以及解决方法

一、 问题复现 跳转前&#xff1a; 跳转后&#xff1a; 二、分析 由于在vue中使用了keep-alive&#xff0c;页面在切换时&#xff0c;上一个页面的实例被缓存了&#xff0c;跳转后并没有销毁&#xff0c;所以才会残留 tooltip或dropdown&#xff0c;所以有以下解决思路&am…