el-row、el-col，左右同高
2022-07-30 本文已影响0人
coderfl
<el-row>
<el-col span="12"><span>111<br/>111</span></el-col>
<el-col span="12"><span>222</span></el-col>
<el-col span="12"><span>333</span></el-col>
<el-col span="12"><span>444</span></el-col>
</el-row>
span{
display: block;
background: paleturquoise;
margin-bottom: 4px;
margin-right: 4px;
}
-
如果第一个元素比第二个高，后边布局就乱了
image.png
-
解决办法给el-row加display: flex;flex-wrap: wrap
<el-row style="display: flex;flex-wrap: wrap">
<el-col span="12"><span>111<br/>111</span></el-col>
<el-col span="12"><span>222</span></el-col>
<el-col span="12"><span>333</span></el-col>
<el-col span="12"><span>444</span></el-col>
</el-row>
span{
display: block;
background: paleturquoise;
margin-bottom: 4px;
margin-right: 4px;
}
image.png
