el-card多个卡片布局

发布时间：2023-05-09 文章分类：WEB开发, 电脑百科投稿人：李佳字号：默认 | 大 | 超大打印

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进行调节

效果如下：

注意：

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

标签 png, PS, 布局