CSS 网格布局一行X个排列

   <div class="icon-box">
           <div
            v-for="(item,index) in icon" 
            :key="index"  
            class="icon"
            style="cursor: pointer">
             {{item}}
           </div>
         </div>
.icon-box{
  display: grid; 
  /**网格布局*/
  grid-template-columns: repeat(5,1fr);
  /**一行显示5个*/
  grid-gap:5px;
  /**间距*/
}

.icon{

}

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

烽火三十六技丨网络资产安全治理平台新版本发布,一文看懂四大核心优势

云计算、移动互联网、物联网等技术飞速发展&#xff0c;网络环境愈发开放互联&#xff0c;原有的资产管理方式已难以适应当下的变化。同时&#xff0c;网络资产需求的突发性和人为疏忽&#xff0c;也时常导致资产数量不明、类型模糊、安全漏洞检查不全面等问题。因此&#xff0…

鸿蒙ArkUI:【编程范式:命令式->声明式】

命令式 简单讲就是需要开发用代码一步一步进行布局&#xff0c;这个过程需要开发全程参与。 开发前请熟悉鸿蒙开发指导文档&#xff1a;gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。 Objective-C ObjectiveC 复制代码 UIView *cardView …

SNMPv3-原理浅谈+报文示例+简易配置

个人认为&#xff0c;理解报文就理解了协议。通过报文中的字段可以理解协议在交互过程中相关传递的信息&#xff0c;更加便于理解协议。 因此本文将在 SNMPv3 协议报文的基础上进行介绍。 SNMPv3 相关 RFC 文档。 关于 SNMPv3 的基本内容介绍&#xff0c;可参考RFC3410-Intro…

SQL分库分表

一、介绍 问题分析 随着互联网及移动互联网的发展&#xff0c;应用系统的数据量也是成指数式增长&#xff0c;若采用单数据库进行数据存储&#xff0c;存在以下性能瓶颈: 1. IO瓶颈:热点数据太多&#xff0c;数据库缓存不足&#xff0c;产生大量磁盘IO&#xff0c;效率较低。…

CLIP 浅析

CLIP 浅析 文章目录 CLIP 浅析概述如何训练CLIP如何使用Clip进行图像分类优缺点分析优点缺点 概述 CLIP的英文全称是Contrastive Language-Image Pre-training&#xff0c;即一种基于对比文本-图像对的预训练方法或者模型。 如何训练CLIP CLIP包括两个模型&#xff1a;Text …

平滑 3d 坐标

3d平滑 import torch import torch.nn.functional as F import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3Dclass SmoothOperator:def smooth(self, vertices):# 使用一维平均池化进行平滑vertices_smooth F.avg_pool1d(vertices.p…

第五十八节 Java设计模式 - 适配器模式

Java设计模式 - 适配器模式 我们在现实生活中使用适配器很多。例如&#xff0c;我们使用存储卡适配器连接存储卡和计算机&#xff0c;因为计算机仅支持一种类型的存储卡&#xff0c;并且我们的卡与计算机不兼容。 适配器是两个不兼容实体之间的转换器。适配器模式是一种结构模…

镜像制作过程

镜像制作过程 Centos镜像制作 虚拟机系统安装将网卡转换为eth0在install安装时按tab健加入一下配置 net.ifnames=0 biosdevname=0

CRF++ 中文NER

CLUENER数据准备 data [] with open("data/train.json", r) as f:for line in f.readlines():data.append(eval(line)) data特征提取 import jieba import jieba.posseg as psegdef process(text, labelsNone):words [i for i in text]words_flags pseg.cut(tex…

2024数维杯数学建模C题思路代码

2024年数维杯&电工杯思路代码在线文档​https://www.kdocs.cn/l/cdlol5FlRAdE 这道题想要做出好的结果&#xff0c;必须要结合插值法和分布函数来做&#xff0c;主要还是因为勘探点太少&#xff0c;直接用插值法效果不太好&#xff0c;以下是我做的&#xff0c;函数分布可…

图片识别公式神器推荐_mathpix

你是否遇到在某个资料上看到一个很复杂的公式&#xff0c;但有懒得再 word 或者其他文件上打出来。 比如这个&#xff1a; 如果直接截图的话&#xff0c;只能说非常丑陋。 推荐一个网站 mathpix&#xff0c;点击 try for free&#xff0c;注册登录。 Mathpix: AI-powered doc…

计数问题C++

题目&#xff1a; 思路&#xff1a; 1~n之间进行循环遍历&#xff0c;如果i不等于0继续循环&#xff0c;然后求出i的个位数与十位数&#xff0c;如果个位数为要查找的特定数字&#xff0c;计时器就1. 代码&#xff1a; #include<iostream> using namespace std; int n,x…

Django简介

Django 1.安装Django pip install djangopython的包的分布 \python- python.exe- Scripts- pip.exe- django-admin.exe [工具&#xff0c;创建django项目]- Lib- 内置模块- site-packages [安装的包]- pymysql- flask- django [框架的源码]2.创建项目 Django项目会有…

应用层协议之 DNS 协议

DNS 就是一个域名解析系统。域名就是网址&#xff0c;类似于 www.baidu.com。网络上的服务器想要访问它&#xff0c;就得需要它对应的 IP 地址&#xff0c;同时&#xff0c;每个域名对对应着一个 / N个 IP 地址&#xff08;即对应多台服务器&#xff09;。 因此&#xff0c;为了…

SpringCloud:服务拆分和远程调用

程序员老茶 &#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; P   S : 点赞是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#…

奥威-金蝶BI现金流量表模板,可借鉴、可套用

企业现金流一旦出了问题都是大问题&#xff0c;会直接影响到企业的日常运作&#xff0c;甚至直接关系到企业能不能继续存活&#xff0c;因此现金流量表是企业财务分析中重要报表之一&#xff0c;也是企业监控财务监控情况的重要手段之一。那么这么重要的一份现金流量表该怎么做…

boost asio同步编程(附源码api)

首先注明&#xff0c;这里我写的都是关于tcp的通信。 通信大致流程 创建端点 创建tcp端点的api是boost::asio::ip::tcp::endpoint; 当然创建udp端点的api则是boost::asio::ip::udp::endpoint; 是一个表示 TCP/UDP 端点的类&#xff0c;在 Boost.Asio 库中用于网络编程。它通…

【HDFS】关于HDFS-17497:在commit block时更新quota

链接:https://github.com/apache/hadoop/pull/6765 Ticket标题:The number of bytes of the last committed block should be calculated into the file length。 HDFS里,一个在写入的文件可能包含多个commited状态的块。 但是计算文件大小的时候,最后一个commited block并…

【qt】设计器实现界面

设计器实现界面 一.总体思路二.具体操作1.创建项目2.粗略拖放3.水平布局4.垂直布局5.修改名字6.转到槽7.实现槽函数 一.总体思路 二.具体操作 1.创建项目 这次咱们一定要勾选Generate form哦。 因为我们要使用设计器进行拖放。 2.粗略拖放 这里用到了复选框&#xff1a;C…

攻防世界-web-command_execution

题目&#xff1a; 原理&#xff1a; | 的作用为将前一个命令的结果传递给后一个命令作为输入 &&的作用是前一条命令执行成功时&#xff0c;才执行后一条命令 方法一&#xff1a; 第一步&#xff1a; 1.打开浏览器&#xff0c;在文本框内输入127.0.0.1 | find / -name…