element布局没有同行显示,解决上下排列

引入elementUI进行布局,使用两栏布局
使用官方代码
<el-row> <el-col :span="7"><div class="grid-content bg-purple"></div></el-col> <el-col :span="17"><div class="grid-content bg-purple-light"></div></el-col> </el-row>
官方图样
官方图样单行排列

目标样式如下
预计想实现如上的同行显示,但实际效果并没有同行显示,而是如下的上下布局

使用后显示如下

后百度无果,加入css样式解决
.pos{ height: 100%; .el-row{ height: 100%; display: flex; flex-wrap: wrap; .el-col{ height: 100%; } } }
解决
小白学习之路现在开始