ElementPlus卡片如何能够一行呈四，黑马UI前端布局视频资料,element样式具体的细节无法修改，F12找到那个位置，可能在其他组件写了错误，找到那个位置，围绕着位置解决问题最快了,卡片下边-阿里云开发者社区

ElementPlus卡片如何能够一行呈四，黑马UI前端布局视频资料,element样式具体的细节无法修改，F12找到那个位置，可能在其他组件写了错误，找到那个位置，围绕着位置解决问题最快了,卡片下边

2024-07-04 52

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： ElementPlus卡片如何能够一行呈四，黑马UI前端布局视频资料,element样式具体的细节无法修改，F12找到那个位置，可能在其他组件写了错误，找到那个位置，围绕着位置解决问题最快了,卡片下边

参考大佬的资料：

16.渲染用户列表数据__哔哩哔哩_bilibili

Vue3+Element-Plus 主页布局功能功能开发二二_vue3elementplus首页布局-CSDN博客

想实现这样一个样式

卡片能够一行4个展示

  <div style="margin-right: 4%">
      <el-col :span="5" v-for="item in videoList" :key="item.id" :offset="1" style="flex-direction: column;">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <router-link :to="'/video?video=' + item.id">
          <img :src="getImgURL(item.id)" style="width: 100%">
          <p>{{ item.name }}</p>
          </router-link>
        </el-card>
      </el-col> 
    </div>

但是直接用就变成这样了

这里如何解决这个问题，解决问题的方法是：利用flex布局，在卡片的父类中添加flex,同时利用flex-wrap进行换行：

  <div style="margin-right: 4%;display: flex;flex-wrap:wrap">
      <el-col :span="5" v-for="item in videoList" :key="item.id" :offset="1">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <router-link :to="'/video?video=' + item.id">
          <img :src="getImgURL(item.id)" >
          <p>{{ item.name }}</p>
          </router-link>
        </el-card>
      </el-col> 
    </div>