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

---

前言

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>

显示结果：