el-card多个卡片布局(e卡叠加)

编辑：rootadmin

el-card多个卡片布局 el-card多个卡片布局

推荐整理分享el-card多个卡片布局(e卡叠加)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:el-card 满屏,element card,e卡能分开用吗,element card,element card 卡片选择,e卡能叠加多少张,e卡能叠加多少张,e卡能叠加多少张,内容如对您有帮助，希望把文章链接给更多的朋友！

Row Attributes

参数说明类型可选值默认值gutter栅格间隔number—0 el-card多个卡片布局(e卡叠加)

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的时候写成百分比的形式。

本文链接地址:https://www.jiuchutong.com/zhishi/288980.html 转载请保留说明！

上一篇：Vite4 + Vue3 项目打包并发布Nginx服务器 (前端必看)(vue3.0 vite)

下一篇：阿尔瓦拉辛，西班牙 (© Domingo Leiva/Getty Images)(阿尔瓦罗西萨)