css实现每个小盒子占32%,超出就换行

news2024/12/25 12:13:53

代码

  <div class="visitors">
        <visitor class="item" v-for="(user,index) in userArr" :key="user.id" :user="user" :index="index"></visitor>
    </div>






<style lang="scss" scoped>
.visitors{
    display: flex;
//开启flex布局
  flex-wrap: wrap;
//换行属性

    .item{
        width: 32%;
        margin: 5px;
    }
}
</style>

效果

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

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

相关文章

Porfinet转DeviceNet主总线协议转换网关

产品功能 1. 远创智控YC-DNTM-PN型网关是Porfinet从转Devicenet主工业级Porfinet网关。‌这种网关设备允许将Porfinet网络中的设备连接到Devicenet网络中&#xff0c;‌从而实现不同工业通信协议之间的互操作性。‌这些网关设备通常具有两个以太网接口&#xff0c;‌分别用于连…

shell脚本-linux如何在脚本中远程到一台linux机器并执行命令

需求&#xff1a;我们需要从11.0.1.17远程到11.0.1.16上执行命令 实现&#xff1a; 1.让11.0.1.17 可以免密登录到11.0.1.16 [rootlocalhost ~]# ssh-keygen Generating public/private rsa key pair. Enter file in which to save the key (/root/.ssh/id_rsa): Created d…

Ubuntu 22.04.4 LTS (linux) 安装iftop 监控网卡流量 软件

1 安装iftop sudo apt update sudo apt-get install iftop 2 监控网卡 sudo iftop -i eth0 -n -p 界面最上面&#xff0c;显示的是类似刻度尺的刻度范围&#xff0c;显示流量图形的长条作标尺用的。 中间的< >这两个左右箭头&#xff0c;表示的是流量的进出方向.TX&…

使用JS和CSS制作的小案例(day二)

一、写在开头 本项目是从github上摘取&#xff0c;自己练习使用后分享&#xff0c;方便登录github的小伙伴可以看本篇文章 50项目50天​编辑https://github.com/bradtraversy/50projects50dayshttps://github.com/bradtraversy/50projects50days有兴趣的小伙伴可以自己去gith…

美式键盘 QWERTY 布局的起源

注&#xff1a;机翻&#xff0c;未校对。 The QWERTY Keyboard Is Tech’s Biggest Unsolved Mystery QWERTY 键盘是科技界最大的未解之谜 It’s on your computer keyboard and your smartphone screen: QWERTY, the first six letters of the top row of the standard keybo…

Redis的热key解决

1、Redis热Key会带来哪些问题 1、流量集中&#xff0c;达到物理网卡上限。 当某一热点 Key 的请求在某一主机上超过该主机网卡上限时&#xff0c;由于流量的过度集中&#xff0c;会导致服务器中其它服务无法进行。 2、请求过多&#xff0c;缓存分片服务被打垮。 如果热点过于…

Linux入门笔记(指令)

操作系统是什么&#xff1f; 操作系统是一款做软硬件管理的软件。计算机系统自下而上可以大致分为4部分&#xff1a;硬件、操作系统、应用程序和用户。操作系统管理各种计算机硬件&#xff0c;为应用程序提供基础&#xff0c;并且充当计算机硬件与用户之间的中介。重点&#x…

泛微e-cology WorkflowServiceXml SQL注入漏洞(POC)

漏洞描述&#xff1a; 泛微 e-cology 是泛微公司开发的协同管理应用平台。泛微 e-cology v10.64.1的/services/接口默认对内网暴露&#xff0c;用于服务调用&#xff0c;未经身份认证的攻击者可向 /services/WorkflowServiceXml 接口发送恶意的SOAP请求进行SQL注入&#xff0c;…

高并发项目(一):内存池的概念/定长内存池的实现

目录 一、池化技术及其优势 1.1什么是池化技术 1.2内存池的作用 1.3malloc的原理 二、定长内存池的实现 一、池化技术及其优势 1.1什么是池化技术 所谓 “ 池化技术 ” &#xff0c;就是程序先向系统申请过量的资源&#xff0c;然后自己管理&#xff0c;以备不时之需。之所…

微调 Florence-2 - 微软的尖端视觉语言模型

Florence-2 是微软于 2024 年 6 月发布的一个基础视觉语言模型。该模型极具吸引力&#xff0c;因为它尺寸很小 (0.2B 及 0.7B) 且在各种计算机视觉和视觉语言任务上表现出色。 Florence 开箱即用支持多种类型的任务&#xff0c;包括: 看图说话、目标检测、OCR 等等。虽然覆盖面…

吴恩达大模型系列课程《Prompt Compression and Query Optimization》中文学习打开方式

Prompt Compression and Query Optimization GPT-4o详细中文注释的Colab观看视频1 浏览器下载插件2 打开官方视频 GPT-4o详细中文注释的Colab 中文注释链接&#xff1a;https://github.com/Czi24/Awesome-MLLM-LLM-Colab/tree/master/Courses/Prompt-Compression-and-Query-Op…

Activity工作流框架——生成数据表

自动生成activiti数据库表 首先第一步&#xff0c;引入activiti依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency>&…

生成树(STP)协议

一、生成树的技术背景 1、交换机单线路上链,存在单点故障,上行线路及设备都不具备冗余性,一旦链路或上行设备发生故障,网络将面临断网。 总结:以下网络不够健壮,不具备冗余性。 2、因此引入如下网络拓扑结构: 上述冗余拓扑能够解决单点故障问题,但同时冗拓扑也带来了…

Google 数据中心繁忙运转的一天

Google 数据中心是互联网世界的基石&#xff0c;支撑着搜索引擎、云计算服务、视频流媒体等无数在线应用的正常运行。 早晨&#xff1a;启动与检查 6:00 AM - 早班员工到岗 数据中心的运维团队分为多个班次&#xff0c;早班员工准时到岗。他们首先查看夜班同事的交接记录&…

C语言 | Leetcode C语言题解之第238题除自身以外的数组的乘积

题目&#xff1a; 题解&#xff1a; // 数组中除自身以外元素的乘积 int* productExceptSelf(int* nums, int numsSize, int* returnSize) {static int ra[100000]; // 结果数组for (int i 0; i < numsSize; i) {ra[i] 1; // 初始化结果数组为1}int pre 1, suf 1; /…

迭代器+反向迭代器

接上节内容&#xff0c;反向迭代器&#xff08;aoto的价值显示的更明显&#xff09; int main() {string s1("hello world");//string::reverse_iterator rit s1.rbegin();auto rit s1.rbegin();while (rit ! s1.rend()){(*rit) 3;cout << *rit << &…

TypeScript 函数类型 (二)

函数类型 函数有两种方式定义 function 关键字来定义函数 function a(){}表达式定义&#xff08;箭头函数的形式&#xff09; const a()>{}函数需要定义类型的有三个地方 入参 和 返回值 以及 函数本身 的类型, 函数本身的类型常用于表达式定义的函数 function sum(a:stri…

【初阶数据结构】3.单链表

文章目录 3.单链表3.1 概念与结构3.1.1 结点3.1.2 链表的性质3.1.3 链表的打印 3.2 实现单链表3.3 链表的分类3.4 单链表算法题3.4.1 移除链表元素3.4.2 反转链表3.4.3 链表的中间结点3.4.4 合并两个有序链表3.4.5 链表分割3.4.6 链表的回文结构3.4.7 相交链表3.4.8 环形链表I3…

Mysql解忧杂货铺

欢迎来到一夜看尽长安花 博客&#xff0c;您的点赞和收藏是我持续发文的动力 对于文章中出现的任何错误请大家批评指出&#xff0c;一定及时修改。有任何想要讨论的问题可联系我&#xff1a;3329759426qq.com 。发布文章的风格因专栏而异&#xff0c;均自成体系&#xff0c;不足…

面向对象七大原则

学习目标 了解面向对象七大原则基本概念。 在之后实践应用中&#xff0c;要给予七大原则去设计程序。 为什么有七大原则 七大原则总体要实现的目标是&#xff1a; 高内聚、低耦合。 使程序模块的可重复性、移植性增强。 高内聚低耦合 从类角度来看&#xff0c;高内聚低…