el-card多个卡片布局

Row Attributes

参数 说明 类型 可选值 默认值
gutter 栅格间隔 number — 0

Col Attributes

参数 说明 类型 可选值 默认值
span 栅格占据的列数 number — 24 
<el-row :gutter="20">
  <el-col :span="16"><el-card></el-card>
    <el-row :gutter="16" style="margin-top:10px;">
        <el-col :span="12"><el-card style="height: 200px"></el-card></el-col>
        <el-col :span="12"><el-card style="height: 200px"></el-card></el-col>
    </el-row>
  </el-col>
  <el-col :span="8">
      <el-card></el-card>
      <el-card style="margin-top:10px;height: 200px"></el-card>
  </el-col>
</el-row>
//gutter指定列与列之间的间距，span指定占据的列数
//这样写width自适应屏幕不用指定，只需指定span就可以调节相应width。
//height需要指定
//位于同一列的多个card依次往下排列，同列的行与行之间使用margin进行调节

效果如下：

el-card多个卡片布局

注意：

这样写width是根据屏幕自适应调节的，所以后面加其他内容需要指定width的时候写成百分比的形式。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。