<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;
}
css3对文字标签不同宽,不同高使用瀑布流对齐显示
转载请注明出处或者链接地址:https://www.qianduange.cn//article/9383.html
相关文章
-
jQuery是什么?如何使用?
-
大学生bootstrap框架网页作业成品 web前端大作业期末源码 航海王html jquery bootstrap响应式网页制作模板 学生海贼王动漫bootstrap框架网站作品
-
jQuery 上部分--头歌(educoder)实训作业题目及答案
-
js延迟加载的六种方式
-
1.electron之纯原生js/jquery的桌面应用程序(基础篇)
-
Antv X6.js 内容居中相关问题
-
jquery实现全选、反选、取消全部等操作(复选框checkbox)
-
记使用echarts绘制地图根据数据修改每个省份深浅颜色
-
echarts 立体柱状图
-
【攻破css系列——附加篇】vscode自动格式化
发布的文章
用JS生成本周日期代码
2024-04-18 17:04:15
js 递归函数
2024-05-31 10:05:46
jQuery是什么?如何使用?
2024-03-12 01:03:24
大学生bootstrap框架网页作业成品 web前端大作业期末源码 航海王html jquery bootstrap响应式网页制作模板 学生海贼王动漫bootstrap框架网站作品
2024-02-06 15:02:03
JavaWeb Jquery 完成图片表单数据上传,Java之内存泄漏调试学习与总结
2024-05-30 10:05:14
jQuery 上部分--头歌(educoder)实训作业题目及答案
2024-05-30 10:05:14
js延迟加载的六种方式
2024-05-30 10:05:51
1.electron之纯原生js/jquery的桌面应用程序(基础篇)
2024-05-30 10:05:25
SVG preserveAspectRatio 终极理解
2024-05-30 10:05:02
Antv X6.js 内容居中相关问题
2024-05-30 10:05:59
大家推荐的文章