相邻span标签高度错位：如何解决

在使用span标签时，想要设置其高度为auto，以适应内容长度。然而当多个span标签处于同一行时，可能出现其中一个span由于内容较多撑开了高度，而另一个span无法撑开的情况。

问题原因：

这种情况的产生是因为上级元素el-col的高度限制了span的高度。el-col的高度由其内部span的高度计算得出，而span的高度又由其内容决定。因此，当其中一个span的内容较少时，其高度无法撑开上级el-col，导致另一span也无法撑开。

解决方案：

为了解决这个问题，需要取消el-col对span高度的限制，并让其高度等于父容器的高度。具体步骤如下：

实用的图文表格ui布局

基于table, flex属性制作创意的用户个人简介图文表格列表ui布局特效。

下载

1. 将el-col的height: 100%;去除。
2. 将el-row的align-items: center;改为align-items: stretch;。

执行以上操作后，el-col的高度将与父容器相等。同时，span的高度仍然由其内容决定，不会受到el-col高度的限制。

内容居中调整：

执行了上述步骤后，span的高度可以撑开，但label内容仍然没有居中。这是因为span使用的是默认的flex布局。要让label居中，可以在其内部添加如下flex属性：

display: flex;
align-items: center;

这样label的内容就可以在span中垂直居中了。