简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment puis-je faire en sorte qu'un div s'étende vers le haut plutôt que vers le bas si la hauteur verticale augmente ?
P粉530519234
P粉530519234 2024-03-22 10:39:08
0
1
282

J'ai une page avec un titre et du contenu. L'en-tête est une valeur dynamique et peut avoir de nombreux contenus différents en fonction du contenu. Ce problème se produit lorsque le titre est long et nécessite deux lignes ou plus. Puisque je souhaite que le contenu reste dans la même position verticale et horizontale, je souhaite que la dernière ligne du titre le plus long soit dans la même position verticale que la première ligne si le titre est plus court.

J'espère pouvoir faire comprendre aux autres. Veuillez essayer de modifier le titre en ajoutant un deuxième mot et vous verrez ce que je veux dire.

Je pense que ce problème peut être résolu avec flex-box mais je ne sais pas comment, j'ai essayé beaucoup de choses différentes avec flex-end etc.

Voici mon exemple de code : 

.main {
  display: flex;
  justify-content: center;
  min-height: 200px;
  border: 1px solid black;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid red;
  width: 200px;
  height: 300px;
  padding-top: 20px;
  gap: 20px;
}

.header-div {
  display: flex;
  border: 1px solid blue;
  align-items: center;
  text-align: center;
  max-width: 100px;
}

.header {
  border: 1px solid green;
}

.content {
  border: 1px solid green;
}
<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  <link rel="stylesheet" href="style.css">
</head>

<body>
<div class="main">
  <div class="wrapper">
    <div class="header-div">
      <h1 className="header">Header</h1>
    </div>
  <div class="content">Test</div>
    </div>
</div>

</body>

</html>

Merci d'avance !

Modifier C'est une image mal réalisée qui illustre mon objectif. L'image de gauche montre la situation lorsque le titre occupe une ligne, et la deuxième image montre la situation lorsque le titre occupe deux lignes :

P粉530519234
P粉530519234

répondre à tous(1)
P粉481366803
P粉4813668032024-03-23 00:51:03 1 plancher

Changez le CSS de la classe .wrapper : 

.wrapper {
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: center;
  justify-items: center;
  border: 1px solid red;
  width: 200px;
  height: 300px;
  padding-top: 20px;
  gap: 20px;
}

Ici, nous utilisons display: grid pour créer une disposition en grille. La propriété grid-template-rows définit deux lignes : une pour le titre et une pour le contenu. La valeur auto ajustera la ligne d'en-tête à la hauteur du contenu, tandis que la valeur 1fr fera que la ligne de contenu occupera l'espace restant. Les propriétés align-items et justifier-items centrent le contenu dans leurs lignes respectives.

Maintenant, mettez à jour votre code HTML pour que l'élément h1 ait un attribut class au lieu d'un attribut className : 



    Parcel Sandbox
    
  




  

    

      
Header

    

    
Test

Avec ces changements, l'en-tête restera au-dessus du wrapper et le contenu restera dans la même position verticale et horizontale quelle que soit la longueur de l'en-tête. Vous pouvez le tester en modifiant le texte du titre pour voir comment il fonctionne à différentes longueurs.

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！