赞
踩
DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。DIV在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。
我们知道,默认情况下每个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>
显示结果:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。