Comment Aligner les Éléments de Bloc en Ligne Vers le Haut du Conteneur?

Beaucoup de dévelopeurs font face aux problèmes d'alignement des éléments de bloc en ligne. Le problème se compose d'une question suivante: lorsque quelques divs de bloc en ligne ont une hauteur différente, pourquoi le plus court ne s'aligne sur le haut du conteneur?

Nous allons montrer les solutions de ce problème à l'aide des propriétés CSS.

Discutons l'exemple suivant:

1. Créez HTML

  • Créez un <div> avec la classe de "container".
  • Créez deux autres spans dans "container". Nommez le premier div "small-box" et le seconde "big-box".
<div class="container">
  <span class="small-box"></span>
  <span class="big-box"></span>
</div>

2. Créez CSS

  • Définissez height et width des classes.
  • Donnez de couleur, largeur, et style pour border.
  • Définissez background pour les boîtes et définissez display à inline-block qui faire afficher un élément en tant qu'un bloc à l'intérieure et en tant qu'un élément en ligne (inline) à l'extérieur.
.container {
  border: 1px solid #666666;
  width: 350px;
  height: 150px;
}

.small-box {
  display: inline-block;
  width: 40%;
  height: 30%;
  border: 1px solid #666666;
  background: #1c87c9;
}

.big-box {
  display: inline-block;
  border: 1px solid #666666;
  width: 40%;
  height: 50%;
  background: #8ebf42;
}

Voici le résultat final:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .container {
        border: 1px solid #666666;
        width: 350px;
        height: 150px;
      }
      .small-box {
        display: inline-block;
        width: 40%;
        height: 30%;
        border: 1px solid #666666;
        background: #1c87c9;
      }
      .big-box {
        display: inline-block;
        border: 1px solid #666666;
        width: 40%;
        height: 50%;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <span class="small-box"></span>
      <span class="big-box"></span>
    </div>
  </body>
</html>

Notre problème est l'alignement de .small-box vers le haut du conteneur.

Le mot-clé "top" de la propriété vertical-align peut nous aider à résoudre ce problème.

La propriété vertical-align spécifie l'alignement verticale d'un élément en ligne. La valeur "top" valeur aligne le haut de la sous-arborescence alignée avec le haut de la zone de ligne.

Nous avons ce problème parce que vertical-align est à "baseline" c'est pourquoi il ne commence pas en haut.

Nous devrions l'appliquer à la .small-box uniquement afin de le faire démarrer en haut du conteneur:

.small-box {
  vertical-align: top;
}

Donc, maintenant notre problème est résoudré avec une propriété CSS. Voyons le code complet.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .container {
        border: 1px solid #666666;
        width: 350px;
        height: 150px;
      }
      .small-box {
        display: inline-block;
        width: 40%;
        height: 30%;
        border: 1px solid #666666;
        background: #1c87c9;
        vertical-align: top;
      }
      .big-box {
        display: inline-block;
        border: 1px solid #666666;
        width: 40%;
        height: 50%;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <span class="small-box"></span>
      <span class="big-box"></span>
    </div>
  </body>
</html>

Voyons un autre exemple où l’un des éléments div a une hauteur plus grande que le reste des éléments <li>.

Voici l'exemple où une erreur se produit:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      #box-one {
        background-color: #1c87c9;
      }
      #box-two {
        background-color: #8ebf42;
      }
      #box-three {
        background-color: #cccccc;
      }
      #box-four {
        background-color: #666666;
      }
      .normal {
        height: 100px;
        width: 100px;
        display: inline-block;
      }
      .big {
        height: 200px;
        width: 200px;
        display: inline-block;
      }
      ul {
        display: block;
      }
      ul li {
        display: inline;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <span id="box-one" class="normal">Bleu</span>
      </li>
      <li>
        <span id="box-two" class="normal">Vert</span>
      </li>
      <li>
        <span id="box-three" class="normal">Gris</span>
      </li>
      <li>
        <span id="box-four" class="big">
          La dernière div s'aligne verticalement sur la dernière ligne de texte de son contenu. Comment aligner le haut de toutes les divs colorées.
        </span>
      </li>
    </ul>
  </body>
</html>

On doit juste remplacer la propriété display avec la propriété float. Définissez la propriété float à "left". Nous utilisons la propriété float qui est surtout utilisée avec la propriété clear sur un élément. Elle spécifie quels éléments peuvent flotter à côté de l'élément compensé et de quel côté. Ici, nous définissons clairement "both", ce qui signifie que les éléments flottants ne sont pas autorisés des deux côtés.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .container {
        border: 1px solid #666666;
        width: 350px;
        height: 150px;
      }
      .small-box {
        display: inline-block;
        width: 40%;
        height: 30%;
        border: 1px solid #666666;
        background: #1c87c9;
        vertical-align: top;
      }
      .big-box {
        display: inline-block;
        border: 1px solid #666666;
        width: 40%;
        height: 50%;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <span class="small-box"></span>
      <span class="big-box"></span>
    </div>
  </body>
</html>

Dans l'exemple suivant, nous alignons les éléments de niveau inline-block à l'aide du mot-clé "flex" de la propriété display utilisée avec -Webkit- extension..

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
        color: #ffffff;
        display: flex;
        display: -webkit-flex;
        align-items: flex-start;
        -webkit-align-items: flex-start;
      }
      #box-one {
        background-color: #1c87c9;
      }
      #box-two {
        background-color: #8ebf42;
      }
      #box-three {
        background-color: #cccccc;
      }
      #box-four {
        background-color: #666666;
      }
      .normal {
        height: 100px;
        width: 100px;
        display: inline-block;
      }
      .big {
        height: 200px;
        width: 200px;
        display: inline-block;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div>
      <span id="box-one" class="normal">Bleu</span>
      <strong id="box-two" class="normal">Vert</strong>
      <span id="box-three" class="normal">Gris</span>
      <span id="box-four" class="big">
        La dernière div s'aligne verticalement sur la dernière ligne de texte de son contenu. Comment aligner le haut de toutes les divs colorées.
      </span>
    </div>
  </body>
</html>