Exemple où l'un des éléments HTML span est plus grand que le reste des éléments <li>.

Source Code: (back to article)

<!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>