前端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; 快速性…

2023年7月26日 单例模式

单例模式 饿汉模式 package com.wz.cinema.platform.server.util;public class DataManager {/*** 单例模式&#xff1a;整个类在运行中只会有一个实例* 既然是在运行中只有一个实例&#xff0c;那么就必须* 考虑多线程环境** 单例模式分为懒汉模式和饿汉模式* 饿汉模式本身就是…

opencv03-Mat矩阵API的使用

opencv03-Mat矩阵API的使用 构造方法(具体介绍看API文档) int main() {Mat m1 Mat(200, 100, CV_8UC1);imshow("o1", m1);Mat m2 Mat(Size(100, 200), CV_8UC1);imshow("o2", m2);Mat m3 Mat(200, 100, CV_8UC3, Scalar(255, 0, 0));imshow("o3&…

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

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

Qt几种字符类型的相互转换

Qt几种字符类型的相互转换 将const QString转换为const char*将const char*转换为const QStringQstring转换为string把string转换为QstringQt中弹出一个窗口 将const QString转换为const char* #include <QString> #include <iostream>int main() {const QString …

【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…

MySQL_2.6【高级查询2】详细讲解

目录 一、多表查询 1、笛卡尔积现象 2、等值连接查询 3、自连接查询 4、内连接查询 5、外连接 二、子查询 1、单列子查询 2、单行子查询 3、多行子查询 4、多列子查询 5、关联子查询【了解】 6、子查询的综合应用 加油&#xff01;&#xff01;&#xff01; 一、多…

Sklearn学习-iris数据集学习

Sklearn学习-逻辑回归&#xff08;iris数据集&#xff09; 使用load_iris加载数据集&#xff0c;查看包含的keys查看数据的列名&#xff0c;分类目标的名称获取data和target&#xff0c;并打印各自的shape拆分训练集和测试集使用逻辑回归训练。在测试集上计算准确率在测试集上实…

【云原生】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 上会运⾏若⼲容…

React几种避免子组件无效刷新的方案

您好&#xff0c;如果喜欢我的文章&#xff0c;可以关注我的公众号「量子前端」&#xff0c;将不定期关注推送前端好文~ 前言 一个很常见的场景&#xff0c;React中父组件和子组件在一起&#xff0c;子组件不依赖于父组件任何数据&#xff0c;但是会一起发生变化。 在探究原…

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

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

如何通过企业工商信息初步判断企业是否靠谱?

银行、投资机构等对企业进行融资、授信、合作时&#xff0c;需要如何评估企业的可靠性。企业工商信息作为企业的基础信息&#xff0c;是初步判断企业是否靠谱的重要依据之一&#xff0c;通过对企业工商信息的综合分析&#xff0c;我们可以了解企业的经营状况、财务实力、法律风…

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;从而与数…