多个el-card自适应高度对齐问题
原因:由于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 }