css3对文字标签不同宽,不同高使用瀑布流对齐显示

在这里插入图片描述

<div class="wrapper" style="padding: 0;"><span class="wf-item task-tags text-center" v-for="(item,index) in data.categorys" :key="index">{{ item }}</span>
</div>/* 名称瀑布流显示 */
.wrapper {width: 100%;margin: 0 auto;display: flex;flex-wrap: wrap;padding: 15px 5px;
}
.wrapper::after {content: "";flex-grow: 99999;
}
.wf-item {flex-grow: 1;position: relative;overflow: hidden;padding: 10px;border: 1px solid #e7e7e7;
}

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

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

相关文章

Ansible学习笔记15

1、roles&#xff1a;&#xff08;难点&#xff09; roles介绍&#xff1a; roles&#xff08;角色&#xff09;&#xff1a;就是通过分别将variables&#xff0c;tasks及handlers等放置于单独的目录中&#xff0c;并可以便捷地调用他们的一种机制。 假设我们要写一个playbo…

高忆管理:六连板捷荣技术或难扛“华为概念股”大旗

在本钱商场上名不见经传的捷荣技术&#xff08;002855.SZ&#xff09;正扛起“华为概念股”大旗。 9月6日&#xff0c;捷荣技术已拿下第六个连续涨停板&#xff0c;短短七个生意日&#xff0c;股价累积涨幅逾越90%。公司已连发两份股票生意异动公告。 是炒作&#xff0c;还是…

字节一面:css选择器有哪些?优先级?哪些属性可以继承?

前言 最近博主在字节面试中遇到这样一个面试题&#xff0c;这个问题也是前端面试的高频问题&#xff0c;作为一名前端开发工程师&#xff0c;css是我们的必备技能&#xff0c;熟悉css选择器以及继承是我们写好css的关键&#xff0c;博主在这给大家细细道来。 &#x1f680; 作者…

NASM编译器之下载安装使用

NASM的下载和安装 每种处理器都可能会有自己的汇编语言编译器&#xff0c;而对于同一款处理器来说&#xff0c;针对不同的平台(比如Windows和Linux&#xff09;&#xff0c;也会有不同版本的汇编语言编译器。 现存的汇编语言编译器有多种&#xff0c;用得比较多的有 MASM、FA…

大数据学习06-Spark分布式集群部署

Spark完全分布式部署 前期准备&#xff0c;每台服务器都需要配置安装Scala下载Scala安装包配置环境变量 安装spark解压配置环境修改配置 前期准备&#xff0c;每台服务器都需要配置 配置好IP vim /etc/sysconfig/network-scripts/ifcfg-ens33 TYPE"Ethernet" PROX…

申威芯片UOS中opencv DNN推理

Cmake&#xff0c;opencv&#xff0c;opencv-contribute安装 #apt可能需要更新apt update apt install -y wget unzip apt-get install build-essential libgtk2.0-dev libgtk-3-dev libavcodec-dev libavformat-dev libjpeg-dev libswscale-dev libtiff5-dev#安装cmake apt i…

韶音耳机是哪个国家的品牌,韶音耳机属于什么档次

在如今耳机产品层出不穷的时代&#xff0c;许多品牌纷纷推陈出新&#xff0c;打造出更具创新性的耳机产品。其中&#xff0c;韶音耳机可谓引人注目。然而&#xff0c;对于韶音耳机这个品牌&#xff0c;仍有许多朋友并不熟悉。比如说&#xff0c;韶音耳机是哪个国家的品牌呢&…

解决Spring Data JPA中的NullPointerException问题

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

Python全攻略:基础学习、爬虫编程实战和面试技巧

在这个充满活力和机会的编程世界中&#xff0c;我们为你提供一份宝贵的指南&#xff0c;旨在帮助你全面了解Python的各个方面。我们将深入探讨面试技巧&#xff0c;提供学习资源&#xff0c;探索爬虫实战经验&#xff0c;并提供丰富的编程示例。无论你是初学者&#xff0c;还是…

Springboot整合AOP实现日志的保存

1.定义注解 /*** 系统日志元注解*/ Target(ElementType.METHOD) Retention(RetentionPolicy.RUNTIME) Documented public interface LogFilter {String value() default "" ; } 2.编写切面的实现 Aspect Component public class LogAspect {private static final …

安装程序报错“E: Sub-process /usr/bin/dpkg returned an error code (1)”的解决办法

今天在终端使用命令安装程序时出现了如下的报错信息。 E: Sub-process /usr/bin/dpkg returned an error code (1) 这种情况下安装什么程序最终都会报这个错&#xff0c;具体的报错截图如下图所示。 要解决这个问题&#xff0c;首先使用下面的命令进到相应的目录下。 cd /var/…

驱动开发--day2(内核不同模块的相互访问、字符设备驱动、led控制实验代码及现象)

实现三盏灯的控制&#xff0c;编写应用程序测试 head.h #ifndef __HEAD_H__ #define __HEAD_H__#define LED1_MODER 0X50006000 #define LED1_ODR 0X50006014 #define LED1_RCC 0X50000A28#define LED2_MODER 0X50007000 #define LED2_ODR 0X50007014#endif mychrdev.c #inc…