前端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>

显示结果:
前端html中让两个或者多个div在一行显示,用style给div加上css样式_第1张图片

你可能感兴趣的:(前端,html,css)