如何讓Element UI中同一行相鄰列的高度自動適應內容？

Element UI佈局：解決同一行相鄰列高度不一致問題

在使用Element UI構建頁面時，經常會遇到同一行內，相鄰列的高度因內容差異而無法自動匹配的問題。本文將分析此問題並提供有效的解決方案。

問題描述

假設我們使用el-row和el-col構建如下佈局：

<el-row class="row">
  <el-col class="col">
    <span class="label">上平行度</span>
    <span class="value">較長文本內容...</span>
  </el-col>
  <el-col class="col">
    <span class="label">平行度OK/NG</span>
    <span class="value">短文本</span>
  </el-col>
</el-row>

即使設置.label和.value的height: auto; ，由於el-col或其他樣式限制，短列的高度可能無法與長列一致。

問題分析

問題根源在於el-col默認高度行為以及父元素的佈局方式。 el-col的高度受其內容影響，但如果父元素（ el-row ）的佈局方式限制了子元素高度的自動調整，則會導致高度不一致。

解決方案

為了讓列高自動適應內容，我們需要調整CSS樣式：

1. 移除el-col的高度限制:刪除el-col中任何顯式或隱式的高度設置（例如height: 100%; ）。讓el-col的高度完全由其子元素內容決定。

2. 調整el-row的佈局:確保el-row的佈局允許子元素高度自動擴展。 如果使用了align-items: center; ，則將其移除或改為align-items: stretch; （ stretch是默認值，可以省略）。這將允許el-col的高度根據內容自動調整。

3. 可選：內容垂直居中:如果需要內容垂直居中，可以在.label和.value上應用display: flex;和align-items: center; 。

修改後的CSS示例：

 .row {
  border-bottom: solid .0625rem #9c9c9c;
  display: flex;
  /* align-items: stretch; (默認值，可以省略) */

  .col {
    display: flex;
    flex-direction: column; /* 確保label和value垂直排列*/

    span:not(:last-child) {
      border-right: solid .0625rem #9c9c9c;
    }
    ::v-deep span {
      flex: 1; /* 允許span高度自動擴展*/
      word-break: break-all;
      word-wrap: break-word;
      /* height: 23px; 移除固定高度*/
      /* line-height: 23px; 移除固定行高*/
      text-align: center; /* 可選：水平居中*/
    }
    .label {
      background-color: #e0e0e0;
      color: #000000;
      font-weight: bold;
      height: auto;
      display: flex;
      align-items: center; /* 垂直居中*/
    }
    .value {
      height: auto;
      display: flex;
      align-items: center; /* 垂直居中*/
    }
  }
}

通過以上調整， el-col的高度將根據其內容自動調整，從而解決同一行相鄰列高度不一致的問題。 記住移除任何強制設置el-col高度的樣式。

以上是如何讓Element UI中同一行相鄰列的高度自動適應內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！