Comment faire en sorte que la hauteur des colonnes adjacentes dans l'interface utilisateur de l'élément s'adapte automatiquement au contenu?

Disposition de l'interface utilisateur de l'élément: résolvez le problème de la hauteur incohérente des colonnes adjacentes sur la même ligne

Lors de la création d'une page à l'aide de l'interface utilisateur de l'élément, vous rencontrez souvent le problème selon lequel les hauteurs des colonnes adjacentes dans la même ligne ne peuvent pas être automatiquement adaptées en raison des différences de contenu. Cet article analyse ce problème et fournit des solutions efficaces.

Description du problème

Supposons que nous utilisons el-row et el-col pour construire la disposition suivante:

<el-row class="row">
  <el-col class="col">
    <span class="label">Parallélisme</span>
    <span class="value">Contenu texte plus long ...</span>
  </el-col>
  <el-col class="col">
    <span class="label">Parallélisme OK / NG</span>
    <span class="value">Texte court</span>
  </el-col>
</el-row>

Même si height: auto; de .label et .value sont définis, la hauteur de la colonne courte peut ne pas être cohérente avec la longue colonne due à el-col ou à d'autres limitations de style.

Analyse des problèmes

La cause profonde du problème réside dans le comportement de hauteur par défaut el-col et la disposition des éléments parents. La hauteur de el-col est affectée par son contenu, mais si la disposition de l'élément parent ( el-row ) limite le réglage automatique de la hauteur de l'élément enfant, il entraînera une incohérence de la hauteur.

Solution

Pour que la hauteur de la colonne s'adapte automatiquement au contenu, nous devons ajuster le style CSS:

1. Retirez les limites de hauteur pour el-col : Retirez tous les réglages de hauteur explicites ou implicites dans el-col (par exemple, height: 100%; ). Laissez la hauteur d' el-col déterminer complètement le contenu de son élément enfant.

2. Ajustez la disposition d' el-row : assurez-vous que la disposition d' el-row permet aux éléments enfants de se développer automatiquement. Si align-items: center; est utilisé, retirez-le ou changez-le align-items: stretch; ( stretch est la valeur par défaut et peut être omis). Cela permettra à la hauteur de el-col d'être ajusté automatiquement en fonction du contenu.

3. Facultatif: Contenu Verticalement centré: Si le contenu doit être centré verticalement, vous pouvez appliquer display: flex; et align-items: center; sur .label et .value .

Exemple CSS modifié:

 .rangée {
  Border-Bottom: solide .0625REM # 9C9C9C;
  Affichage: flex;
  / * Align-Items: Stretch; (valeur par défaut, peut être omise) * /

  .Col {
    Affichage: flex;
    Flex-Direction: colonne; / * Assurez-vous que l'étiquette et la valeur sont organisées verticalement * /

    Span: pas (: dernier-enfant) {
      Border-droite: solide .0625REM # 9C9C9C;
    }
    :: V-Deep Span {
      Flex: 1; / * Permettez à la hauteur de duprès de se développer automatiquement * /
      Bris de mot: Break-All;
      Word-Wrap: Break-Word;
      / * Hauteur: 23px; Retirer la hauteur fixe * /
      / * LINE-HEIGHT: 23px; Retirer la hauteur fixe de la ligne * /
      Texte-aligne: Centre; / * Facultatif: centre horizontal * /
    }
    .étiquette {
      Color d'arrière-plan: # E0E0E0;
      Couleur: # 000000;
      Police-poids: Bold;
      Hauteur: Auto;
      Affichage: flex;
      Align-Items: Centre; / * Centre vertical * /
    }
    .valeur {
      Hauteur: Auto;
      Affichage: flex;
      Align-Items: Centre; / * Centre vertical * /
    }
  }
}

Grâce aux ajustements ci-dessus, la hauteur de el-col sera automatiquement ajustée en fonction de son contenu, résolvant ainsi le problème des hauteurs incohérentes des colonnes adjacentes dans la même ligne. N'oubliez pas de supprimer tous les styles qui obligent la hauteur el-col .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!