位置: IT常识 - 正文
el-card多个卡片布局(e卡 叠加)
编辑：rootadminel-card多个卡片布局 el-card多个卡片布局
本文链接地址:https://www.jiuchutong.com/zhishi/288980.html
转载请保留说明！
推荐整理分享el-card多个卡片布局(e卡 叠加)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:el-card 满屏,element card,e卡能分开用吗,element card,element card 卡片选择,e卡能叠加多少张,e卡能叠加多少张,e卡能叠加多少张,内容如对您有帮助，希望把文章链接给更多的朋友！
Row Attributes
参数说明类型可选值默认值gutter栅格间隔number—0Col 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的时候写成百分比的形式。
上一篇：Vite4 + Vue3 项目打包并发布Nginx服务器 (前端必看)(vue3.0 vite)
下一篇：阿尔瓦拉辛，西班牙 (© Domingo Leiva/Getty Images)(阿尔瓦罗西萨)