前言

DIV是層疊樣式表中的定位技術，全稱DIVision，即為劃分。有時可以稱其為圖層。DIV在編程中又叫做整除，即只得商的整數(shù)。 DIV元素是用來為HTML（標準通用標記語言下的一個應用）文檔內(nèi)大塊（block-level）的內(nèi)容提供結構和背景的元素。
我們知道，默認情況下每個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.zghlxwxcb.cn/news/detail-620548.html

到了這里，關于前端html中讓兩個或者多個div在一行顯示，用style給div加上css樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！