首页 > 技术文章 > 多个el-card自适应高度对齐问题

yunjiao 2020-10-28 18:39 原文

原因:由于el-card多个自适应高度导致排列错乱问题,

 

 

 源代码:

1 <el-row :gutter="20" v-for="(item ,index) in deviceList" :key="index">
2     <el-col :span="6">
3         <el-card class="box-card">
4             <div class="realtime-info-head"></div>
5         </el-card>
6      </el-col>
7 </el-row>    

解决办法:

 1 .el-row {
 2     margin-bottom: 20px;
 3     display:flex;
 4     flex-wrap: wrap;
 5   }
 6 .el-row  .el-card {
 7     min-width: 100%;
 8     height: 100%; 
 9     margin-right: 20px;
10     transition: all .5s;
11   }

 

推荐阅读