Element UI布局：解决同一行相邻列高度不一致
在使用Element UI构建页面时，经常会遇到同一行内相邻列高度不一致的问题。尤其当某一列内容较多导致高度撑大时，其他列高度却无法自动调整。本文将分析并解决此问题，主要针对el-col和span标签高度自适应的场景。
问题重现
假设我们有如下HTML结构：
上平行度 平行度OK/NG
以及对应的CSS样式：
.row {
border-bottom: solid .0625rem #9c9c9c;
display: flex;
align-items: center; /* 导致问题出现 */
justify-content: center;
.col {
height: 100%; /* 限制列高度 */
display: flex;
span:not(:last-child) {
border-right: solid .0625rem #9c9c9c;
}
::v-deep span {
flex: 1;
height: 100%; /* 限制span高度 */
word-break: break-all;
word-wrap: break-word;
height: 23px; /* 限制span高度 */
line-height: 23px;
}
.label {
background-color: #e0e0e0;
color: #000000;
font-weight: bold;
height: auto;
}
.value {
height: auto;
}
}
}
当其中一列内容较多时，align-items: center; 会导致列高无法自动适应，产生高度不一致。
解决方案
问题的核心在于align-items: center; 和 height: 100%; 的组合。align-items: center; 将项目垂直居中，但无法自动撑高；height: 100%; 则限制了列高。
解决方法如下：
-
移除高度限制: 删除
.col和::v-deep span中的height: 100%;以及::v-deep span中的height: 23px;。让列高和span高根据内容自适应。 -
调整对齐方式: 将
.row的align-items: center;改为align-items: stretch;(或直接移除，因为stretch是默认值)。这使得列会占据父容器的全部高度。 -
内容垂直居中: 如果需要内容垂直居中，则需要在
.label和.value类中使用 flex 布局实现垂直居中：
.label, .value {
display: flex;
align-items: center;
}
通过以上调整，el-col 的高度将根据内容自适应，从而解决高度不一致的问题。 确保 el-row 的高度能够自动适应，避免外部样式限制了 el-row 的高度。
通过这些修改，即使一列内容较多，其他列也能自动调整高度，保持页面布局一致性。
