Éléments de niveau bloc dans une page Web apparaissent dans l'ordre séquentiel. Pour améliorer l'apparence ou l'utilité de la page, vous pouvez modifier cet ordre en enveloppant des blocs, y compris des images, de sorte que le texte s'enchaîne autour des images.
En termes de conception Web, cet effet est connu sous le nom de flottement de l'image. Ceci est réalisé avec le Propriété CSSflotter, qui permet au texte de circuler autour de l'image alignée à gauche sur son côté droit (ou autour d'une image alignée à droite sur son côté gauche).
Commencez avec HTML
Cet exemple ajoute une image au début d'un paragraphe (avant le texte, mais après l'ouverture
étiqueter). Voici le balisage HTML initial:
Le texte du paragraphe va ici. Dans cet exemple, nous avons une image d'une photo de tête, donc ce texte peut décrire la personne dans la photo de tête.
Par défaut, la page s'afficherait avec l'image au-dessus du texte, car les images sont des éléments de niveau bloc en HTML. Cela signifie que le navigateur affiche les sauts de ligne avant et après l'élément image par défaut. Pour modifier cette apparence par défaut à l'aide de CSS, ajoutez une valeur de classe (
la gauche) à l'élément image pour servir de crochet auquel les propriétés peuvent être attachées.Le texte du paragraphe va ici. Dans cet exemple, nous avons une image d'une photo de tête, donc ce texte peut décrire la personne dans la photo de tête.
Notez que cette classe ne fait rien toute seule. CSS permettra d'obtenir le style souhaité.
Ajout de styles CSS
Ajouter cette règle au site feuille de style:
.la gauche {
flotteur: gauche ;
remplissage: 0 20px 20px 0 ;
}
Ce style flotte n'importe quoi avec la classe la gauche à gauche de la page et ajoute un peu rembourrage à droite et en bas de l'image pour que le texte ne bute pas dessus.
Dans un navigateur, l'image serait désormais alignée à gauche; le texte apparaîtrait à sa droite avec un espace entre les deux.
La valeur de classe .la gauche utilisé ici est arbitraire. Vous pouvez l'appeler comme vous le souhaitez car il ne fait rien tout seul. Cependant, vous ne devriez pas non plus que toute valeur que vous modifiez dans le CSS soit également reflétée dans le HTML.
Autres façons d'obtenir ces styles
Vous pouvez également retirer la valeur de classe de l'image et la styliser avec CSS en écrivant un sélecteur plus spécifique. Dans l'exemple ci-dessous, l'image est à l'intérieur d'une division avec un contenu principal valeur de classe.
Le texte du paragraphe va ici. Dans cet exemple, nous avons une image d'une photo de tête, donc ce texte peut décrire la personne dans la photo de tête.
Pour styliser cette image, écrivez ce CSS:
.main-content img {
flotteur: gauche;
remplissage: 0 20px 20px 0 ;
}
Dans ce scénario, l'image est alignée à gauche, le texte flottant autour d'elle comme avant, mais sans la valeur de classe supplémentaire dans le balisage. Faire cela à grande échelle peut aider à créer un fichier HTML plus petit, qui sera plus facile à gérer et peut améliorer les performances.
Évitez les styles en ligne
Enfin, vous pouvez utiliser styles en ligne:
Le texte du paragraphe va ici. Dans cet exemple, nous avons une image d'une photo de tête, donc ce texte peut décrire la personne dans la photo de tête.
Ceci n'est cependant pas conseillé, car il combine le style d'un élément avec son balisage structurel. Les meilleures pratiques dictent que le style et la structure d'une page restent séparés. Cette séparation est particulièrement utile lorsque vous devez modifier la mise en page de la page et rechercher différentes tailles d'écran et différents appareils avec un site Web réactif.
L'entrelacement du style de la page avec le HTML rend création de requêtes multimédias pour ajuster votre site pour différents écrans beaucoup plus difficile.