css

2024-07-06 20:28| 来源: 网络整理| 查看: 265

在做一些类似商城的项目中，我们会时常遇到类似五个模块中三个模块占一行，另外外两个换到下一行靠左对齐这样的情况。下面我通过案例来实现以下这个效果：

效果图：

在这里插入图片描述

案例如下： export default { data() { return { list:[1,1,1,1] // 根据数组条数控制有几个盒子 } }, } .test { ul { display: flex; justify-content: space-between; flex-wrap: wrap; text-decoration: none; li { margin-top: 10px; width: 32%; height: 100px; border: 1px solid #333333; background-color: skyblue; } } ul:after{ // 使用伪类元素占据单位，不影响页面 content: ""; height: 0; width: 32%; } }

【本文地址】

公司简介

联系我们