recherche

Maison  >  Questions et réponses  >  le corps du texte

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 ?

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粉530519234P粉530519234246 Il y a quelques jours318

répondre à tous(1)je répondrai

  • P粉481366803

    P粉4813668032024-03-23 00:51:03

    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.

    répondre
    0
  • Annulerrépondre