怎么把一个el-card放在另一el-card的右面,在把另外一个el-card放在它的下边,一共三个card
时间: 2024-01-06 21:20:28 浏览: 163
卡片左右切换
你可以使用`el-row`和`el-col`来实现这个布局,具体代码如下:
```html
<template>
<el-card>
<el-row>
<el-col :span="16">
<el-card>
第一个card
</el-card>
</el-col>
<el-col :span="8">
<el-card>
<el-row>
<el-col :span="24">
<el-card>
第二个card
</el-card>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-card>
第三个card
</el-card>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
</el-card>
</template>
```
在这个例子中,我们使用了一个父`el-card`包含两个子`el-card`,第一个子`el-card`占据了父`el-card`的16列,第二个子`el-card`占据了父`el-card`的8列,然后在第二个子`el-card`中使用了两个`el-row`和两个`el-col`来实现第二和第三个card的布局。
阅读全文