如何解决使用Element UI时同一行相邻列的高度不一致问题？-html教程-PHP中文网

如何解决使用Element UI时同一行相邻列的高度不一致问题？

花韻仙語

发布： 2025-03-16 08:32:11

原创

615人浏览过

如何解决使用element ui时同一行相邻列的高度不一致问题？

Element UI布局：解决同一行相邻列高度不一致

在使用Element UI构建页面时，经常会遇到同一行内相邻列高度不一致的问题。尤其当某一列内容较多导致高度撑大时，其他列高度却无法自动调整。本文将分析并解决此问题，主要针对el-col和span标签高度自适应的场景。

问题重现

假设我们有如下HTML结构：

<el-row class="row">
  <el-col class="col">上平行度</el-col>
  <el-col class="col">平行度OK/NG</el-col>
</el-row>

登录后复制

以及对应的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 的高度。

通过这些修改，即使一列内容较多，其他列也能自动调整高度，保持页面布局一致性。

以上就是如何解决使用Element UI时同一行相邻列的高度不一致问题？的详细内容，更多请关注php中文网其它相关文章！