要素UIの隣接する列の高さを自動的にコンテンツに自動的に適応させる方法は？

要素UIレイアウト：同じ行の隣接する列の一貫性のない高さの問題を解決する

要素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>

たとえheight: auto; .labelと.valueが設定されているため、短い列の高さは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. オプション：コンテンツの垂直中心：コンテンツを垂直に中央に配置する必要がある場合は、 display: flex;およびalign-items: center; on .label and .value 。

修正されたCSSの例：

 。行 {
  国境圏：SOLID .0625REM＃9C9C9C;
  ディスプレイ：Flex;
  /* Align-Items：Stretch; （デフォルト値、省略できます） */

  .col {
    ディスプレイ：Flex;
    フレックス方向：列; /*ラベルと価値が垂直に配置されることを確認してください*/

    スパン：not（：last-child）{
      境界線右：SOLID .0625REM＃9C9C9C;
    }
    :: v-deepスパン{
      フレックス：1; /*スパンの高さを自動的に拡張できるようにします*/
      ワードブレイク：ブレークオール;
      ワードラップ：ブレークワード;
      /*高さ：23px;固定された高さを削除*/
      /* line-height：23px;固定線の高さを削除*/
      テキストアライグ：センター; /*オプション：水平センター*/
    }
    .label {
      バックグラウンドカラー：＃e0e0e0;
      色：＃000000;
      font-weight：bold;
      高さ：自動;
      ディスプレイ：Flex;
      Align-Items：Center; /*垂直中心*/
    }
    。価値 {
      高さ：自動;
      ディスプレイ：Flex;
      Align-Items：Center; /*垂直中心*/
    }
  }
}

上記の調整により、 el-colの高さはその内容に応じて自動的に調整され、それにより同じ列の隣接する列の一貫性のない高さの問題を解決します。 el-col高さを強制するスタイルを削除することを忘れないでください。

以上が要素UIの隣接する列の高さを自動的にコンテンツに自動的に適応させる方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。