美文网首页
el-row里面有多个el-card因内容不一导致高度不一

el-row里面有多个el-card因内容不一导致高度不一

作者: 菲儿_cdd4 | 来源:发表于2021-04-28 18:58 被阅读0次

问题:
el-row布局里面的el-card内容不一,导致card的高度不一致

image.png

解决方案:
在el-row上添加一个row-box类名,在el-card上添加一个el-card类名,样式如下面的代码

注意:

  • <style>添加类名的样式一定要写在这里面</style>
  • el-card上添加的类名必须是el-card
<template>
<el-row :gutter="12"  class="row-box">
    <el-col  :span="8">
        <el-card shadow="always" class="el-card" >
        </el-card>
   </el-col>
</el-row>
</template>
<style>
.row-box {
  display: flex;
  flex-flow: wrap;
}
.row-box .el-card {
  min-width: 100%;
  height: 100%;
  margin-right: 20px;
  border: 0px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
</style>

相关文章

网友评论

      本文标题:el-row里面有多个el-card因内容不一导致高度不一

      本文链接:https://www.haomeiwen.com/subject/vyjprltx.html