LabEx
EntrerRejoindre

Création de dispositions en carreaux responsives

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire, nous allons apprendre à créer une disposition en trois carreaux à l'aide de display: inline-block. Vous utiliserez width et calc pour diviser uniformément le conteneur en trois colonnes et définir font-size pour éviter les espaces blancs. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la manière de créer une disposition en carreaux propre et responsive sans utiliser float, flex ou grid.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 96%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Disposition en trois carreaux

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour créer une disposition en trois carreaux, utilisez display: inline-block au lieu de float, flex ou grid. Utilisez width en combinaison avec calc pour diviser uniformément la largeur du conteneur en trois colonnes. Pour éviter les espaces blancs, définissez font-size sur 0 pour .tiles et sur 20px pour les éléments <h2> afin d'afficher le texte. Notez que l'utilisation de font-size: 0 pour lutter contre les espaces blancs entre les blocs peut entraîner des effets de bord si vous utilisez des unités relatives (par exemple em).

<div class="tiles">
  <div class="tile">
    <img src="https://via.placeholder.com/200x150" />
    <h2>30 Seconds of CSS</h2>
  </div>
  <div class="tile">
    <img src="https://via.placeholder.com/200x150" />
    <h2>30 Seconds of CSS</h2>
  </div>
  <div class="tile">
    <img src="https://via.placeholder.com/200x150" />
    <h2>30 Seconds of CSS</h2>
  </div>
</div>

.tiles {
  width: 600px;
  font-size: 0;
  margin: 0 auto;
}

.tile {
  width: calc(600px / 3);
  display: inline-block;
}

.tile h2 {
  font-size: 20px;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations! Vous avez terminé le laboratoire de disposition en trois carreaux. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.