如何使同一行内相邻列的高度一致？解决span标签高度自适应问题

让span标签高度自适应，实现同一行内列高一致

网页布局中，常常需要同一行内多个列的高度保持一致，尤其当使用span标签时，内容差异可能导致高度不一致。本文通过一个案例，讲解如何解决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%; /* 这里需要修改 */
      word-break: break-all;
      word-wrap: break-word;
      height: 23px; /* 这里需要修改 */
      line-height: 23px; /* 这里需要修改 */
    }
    .label {
      background-color: #e0e0e0;
      color: #000000;
      font-weight: bold;
      height: auto;
    }
    .value {
      height: auto;
    }
  }
}

当某一列内容较多时，其高度会撑开，而其他列高度不变，导致列高不一致。

解决方案：灵活运用Flex布局

问题根源在于父元素（.row）和子元素（.col）以及span之间的高度计算关系。 解决方法如下：

1. 调整.row的对齐方式: 将.row中的align-items: center;改为align-items: stretch;。stretch会使所有子元素（.col）的高度填满父元素的高度。

   

   Keevx

   一款专为海外中小企业和创作者打造的AI数字人视频创作平台

   下载

2. 移除高度限制: 删除.col和::v-deep span中的height: 100%;以及::v-deep span中的height: 23px;和line-height: 23px;设置。 这些固定高度限制了元素根据内容自适应。

3. 内容垂直居中: 调整后，内容较少的列内容可能偏下。 为.label添加Flex布局，实现内容垂直居中：

.label {
  display: flex;
  align-items: center;
}

通过以上调整，.col的高度会根据其子元素（span）的内容自动调整，从而使同一行内的所有列高度一致。 关键在于利用Flex布局的特性，让子元素高度自动适应内容。

通过这些调整，即可确保同一行内所有列的高度根据内容自适应，实现高度一致的布局效果。