CSS 中::after的妙用(实现在margin中显示内容)

效果图如下:

背景: 如上图,之前只是当纯的写一个参考货架平面图,用作物料系统的在库状态可视化,当完成页面body分成10等份时,货架之间需要有通道,为了实现实际的样式,我给每个等份都添加了margin-right: 4%,然后即将上线时用户说希望这些通道标注上‘通道’两个字,因为不想大改的原因我就找文心一言给我实现在margin-right中怎么添加文字,结果还真就可以,给我提供了after这个关键字,最终实现如下

#gudinghuojia2F .layui-col-xs10:not(:last-child)::after {content: '通道'; /* 在 div 右侧添加文字 */position: absolute;top: 40%;font-size: xxx-large;left: 110%;color: #c9750582;
}#gudinghuojia2F .layui-col-xs10 {margin-right: 4%;}/*以下是我的货架 效果图 ,        layui-row这个div分成了lay.zhong等份,
而我在这若干等份中添加了margin-right: 4%,实际是当作货架之间的通道,但是用户希望显示通道2个字,但页面都已经实现了,我就想着怎么在边框中显示文字也就是margin-right中,
最后发现使用after就能实现:layui-col-xs10:not(:last-child)::after{ content: '通道'; /* 在 div 右侧添加文字 */  position: absolute;}而因为最后一个货架之后是不需要添加通道的,因此我添加了not(:last-child),也就是排除了最后一个*/<div id="gudinghuojia2F" th:if="${cc == 'CP-2F' }" style="height: 100%;"><div class="layui-row" ><div style="font-size: xx-large; font-family: fantasy; color: #031cdd; z-index: 999;"><!--列号--><div style="height:10%;"></div><div th:styleappend="'height: calc(90% / '+ ${lay.lie}+')'" th:each="iii : ${#numbers.sequence(lay.lie, 1, -1)}" th:text="${iii}"></div></div><div class="layui-col-xs10" th:each="i : ${#numbers.sequence(lay.zhong, 1, -1)}" ><div class="inner-title" th:text="${lay.da + '-' + i}"></div><div class="inner-div" th:each="ii : ${#numbers.sequence(lay.lie, 1, -1)}" th:id="${lay.da + '-' + i + '-1-'+ ii}" th:styleappend="'height: calc(80% / '+ ${lay.lie}+')'"></div></div></div><div class="waitongdao"> 外通道</div>
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/99778.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot集成WebSocket讲解

文章目录 1 WebSocket1.1 简介1.2 WebSocket作用和调用1.2.1 作用1.2.2 js端调用 1.3 Javax1.3.1 服务端1.3.1.1 服务端接收1.3.1.2 服务端集成1.3.1.3 ping和pong消息 1.3.2 客户端1.3.2.1 客户端接收1.3.2.2 客户端发送 1.4 WebMVC1.4.1 服务端1.1.4.1 服务端接收1.1.4.2 服务…

ArcGIS Pro地图可视化—双变量关系映射

原址链接ArcGIS Pro地图可视化—双变量关系映射https://mp.weixin.qq.com/s/g-pPBHPXMOEF5NHm06JcrA 这个方法很早很早以前就有了&#xff0c;可能大家早就知道了&#xff0c;可我昨天刚看到这个东西 https://en.wikipedia.org/wiki/Multivariate_map 像是上图&#xff0c;美国…

笔记36:CNN的多通道卷积到底是什么样的

总结&#xff1a; &#xff08;1&#xff09;输入卷积层的feature_map的通道数&#xff0c;就是该卷积层每个卷积核所含有的通道数 &#xff08;2&#xff09;输出卷积层的feature_map的通道数&#xff0c;就是该卷积层所含有的卷积核的个数 a a a a 解释&#xff1a;【…

无人化微波产品智能测试系统

无人化微波产品智能测试系统是面向射频微波产品领域客户数字化转型需求&#xff0c;推出的一款新形态自动测试系统。该系统实现了微波产品测试由单工位串行测试向多工位并行测试转变&#xff0c;具有测试容量大、测试效能高、测试管理信息化等特点。该系统可数倍提升客户的测试…

以dzzoffice为例设置通过 SOCKET 连接 SMTP 服务器发送(支持 ESMTP 验证)

在测试dzzoffice的过程中&#xff0c;需要配置邮件服务器&#xff0c;dzzoffice的邮件设置有三种选项&#xff1a; 1、通过 PHP 函数的 sendmail 发送(推荐此方式) 2、通过 SOCKET 连接 SMTP 服务器发送(支持 ESMTP 验证) 3、通过 PHP 函数 SMTP 发送 Email(仅 Windows 主机下有…

vulnhub_clover靶机渗透测试

clover靶机 文章目录 clover靶机信息收集ftp渗透web渗透横线移动权限提升靶机总结 靶机地址&#xff1a;https://www.vulnhub.com/entry/clover-1,687/ 信息收集 使用nmap扫描得到了很对端口&#xff0c;能用的也就是21 22 80三个端口&#xff0c;其他都是关闭的&#xff0c;全…

基于正点原子alpha开发板的第三篇系统移植

系统移植的三大步骤如下&#xff1a; 系统uboot移植系统linux移植系统rootfs制作 一言难尽&#xff0c;踩了不少坑&#xff0c;当时只是想学习驱动开发&#xff0c;发现必须要将第三篇系统移植弄好才可以学习后面驱动&#xff0c;现将移植好的文件分享出来&#xff1a; 仓库&…

医药行业投资公司都有哪些?医药企业项目投资分析实用工具

据药融云-投融资数据库信息调研结果发现&#xff0c;在 3000家参与医疗投资的资方中,有超200家专注医疗投资的机构。 资方的信息可以通过垂直的生物医药行业投融资数据库进行查找&#xff0c;该类数据库收载了全球绝大部分的生物医药行业投资机构信息&#xff08;包含了投资机构…

clickhouse之readonly解决方法

1&#xff0c;问题描述 日志报错写入ck报错&#xff1a;ru.yandex.clickhouse.except.ClickHouseUnknownException: ClickHouse exception, code: 1002, host: 192.16.1.19, port: 8123; Code: 242. DB::Exception: Table is in readonly mode: replica_path/clickhouse/tables…

$attrs 和 $listeners (vue2vue3)

目录 透传 Attributes Attributes 继承​ 对 class 和 style 的合并 v-on 监听器继承 深层组件继承 禁用 Attributes 继承 多根节点的 Attributes 继承 vue2 $attrs 和 $listeners $attrs 概念说明 $attrs 案例 $listeners 概念说明 $listeners案例 vue3 $attr…

【算法|双指针系列No.3】leetcode202. 快乐数

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…

springboot整合websocket开箱即用

springboot-websocket整合项目开箱即用&#xff0c;ws服务端&#xff0c;包含了在线客户监听&#xff0c;发送指定客户端数据&#xff0c;发送所有客户端数据。还可以根据指定转发给某个客户端。 WebSocketConfig配置缓存大小设置&#xff0c;设置异步发送操作的超时时间&#…

为什么 0.1 + 0.1 !== 0.2

为什么 0.1 0.1 ! 0.2 总结了几个很有意思的基础题目&#xff0c;分享一下。 为什么 0.1 0.1 ! 0.2 看到这个问题&#xff0c;不得不想到计算机中的数据类型&#xff0c;其中浮点数表示有限的精度。那么它就无法精确的表示所有的十进制小数&#xff0c;所以在在某些情况下…

在conda虚拟环境下安装PyTorch-gpu版本

conda环境配置 在conda虚拟环境下安装PyTorch-gpu版本1. 下载好anaconda以及CUDA2. 创建并进入虚拟环境 选择python版本3. 找对python torch torchvision cuda的对应版本 并 下载安装4. 测试是否成功5. 参考资料 在conda虚拟环境下安装PyTorch-gpu版本 引言&#xff1a; 学会在…

bootstrapjs开发环境搭建

Bootstrapjs是一个web前端页面应用开发框架&#xff0c;其提供功能丰富的JavaScript工具集以及用户界面元素或组件的样式集&#xff0c;本文主要描述bootstrapjs的开发环境搭建。 如上所示&#xff0c;使用nodejs运行时环境、使用npm包管理工具、使用npm初始化一个项目工程test…

C#实现OPC DA转OPC UA服务器

运行软件前提前安装好OPC运行组件&#xff1a; 为方便演示&#xff0c;提前准备好了一个DAServer服务器&#xff1a; 接下来开始配置&#xff1a; 该软件主要实现的功能如下&#xff1a; 配置过程也相对简单&#xff1a; 第一步&#xff1a; 编辑如下文件&#xff1a; 第二步…

Android攻城狮学鸿蒙-配置

1、config.json配置 鸿蒙中的config.json应该类似于Android开发中Manifest.xml&#xff0c;可以进行页面的配置。根据顺序&#xff0c;会识别启动应用的时候&#xff0c;要打开哪个界面。 2、 Ability详解&#xff0c;以及与Android的Activity对比。 他人的学习文章连接&…

asp.net网上销售系统VS开发mysql数据库web结构c#编程Microsoft Visual Studio计算机毕业设计

一、源码特点 asp.net 网上销售系统 是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为mysql&#xff0c;使用c#语言开发 aspnet 网上销售系统1 二、功能介绍 前台功能…

pdf文档内容提取pdfplumber、PyPDF2

测试pdfplumber识别效果好些&#xff1b;另外pdf这两个如果超过20多页就没法识别了&#xff0c;结果为空 1、pdfplumber 安装&#xff1a;pip install pdfplumber -i http://mirrors.aliyun.com/pypi/simple --trusted-host mirrors.aliyun.com代码&#xff1a; import pdfpl…

《C++ Primer》第5章 语句

参考资料&#xff1a; 《C Primer》第5版《C Primer 习题集》第5版 5.1 简单语句&#xff08;P154&#xff09; 在一个表达式的末尾加上 ; 就构成了表达式语句&#xff0c;其作用是执行表达式并丢弃结果。 空语句 由单独的 ; 构成的语句为空语句。空语句常用于语法上需要一…