Sélection de la langue

Recherche

Éléments flottants

Chantier

Cette page est en chantier.

Veuillez transmettre un problème ou soumettre une demande de tirage s'il manque des renseignements ou des codes ou si la synchronisation est incorrecte ou déphasée avec le principal référentiel (wet-boew/wet-boew).

Usage

Utilisez un élément flottant pour changer le flux normal d'un élément. Repoussez l'élément à droite ou à gauche de son conteneur, où le texte et les éléments incorporés l'enveloppent.

Conception et codage

Utilisation de base

Servent à faire flotter un élément vers la droite.

Apparence

Tiré à droite

Bonne utilisation

Point d'observation :

  • Utilisez .pull-right pour faire flotter un élément de contenu particulier à droite tandis que des éléments non flottants l'enveloppent
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec le point d'observation précédent
  • N'utilisez pas cet élément pour aligner du texte à droite. Pour les options d'alignement, consultez : Alignement
Code
<div class="pull-right">...</div>

Éléments flottants de gauche

Servent à faire flotter un élément vers la gauche.

Apparence

Tiré à gauche

Bonne utilisation

Point d'observation :

  • Utilisez .pull-left pour faire flotter un élément de contenu particulier à gauche tandis que des éléments non flottants l'enveloppent
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec le point d'observation précédent
  • N'utilisez pas cet élément pour aligner du texte à gauche. Pour les options d'alignement, consultez : Alignement
Code
<div class="pull-left">...</div>

Éléments flottants d'écrasement

Utilisez ces éléments pour écraser (réinitialiser) l'élément flottant de contenu sur n'importe quel élément.

Apparence

Sans écrasement :

Tiré à droite A

Tiré à droite B

Avec écrasement :

Tiré à droite A

Tiré à droite B

Bonne utilisation

Point d'observation :

  • Utilisez .clearfix pour réinitialiser le flux de contenu et empêcher que d'autres éléments de contenu ne flottent autour ou au-dessus d'un élément
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec le point d'observation précédent
Code
<p class="pull-right">Tiré à droite A</p>
<div class="clearfix"></div>
<p class="pull-right">Tiré à droite B</p>

Utilisation améliorée

Caractéristiques complémentaires

Des fonctions et des comportements complémentaires sont disponibles.

Une partie du code et des documents pour cette page est tirée de Bootstrap (lien externe).

Date de modification: