Apprenez à faire envelopper du texte autour d'une image flottante avec CSS.
Pour que votre texte enveloppe l'image de droite, de la même manière que sur la photo présentant cet article, utilisez une règle CSS comme celle-ci :
La règle float: left déplace l'image vers la marge gauche. La règle de remplissage à droite empêche le texte de heurter le côté droit de l'image. Si une bordure était ajoutée à cette image, un remplissage viendrait entre l'image et la bordure. Voir la section 2 pour travailler avec une image avec une bordure.
Ensuite, ajoutez des marges à gauche et à droite de l'image pour la centrer. La valeur appropriée pour les marges gauche et droite pour centrer quoi que ce soit est auto.
Pour créer une bordure épaisse ressemblant à un cadre à l'aide du style de bordure rainure, une règle comme celle-ci peut être utilisée :
Les autres styles de bordure sont pleins, en pointillés, en pointillés, doubles, en crête, en encart et en départ. La largeur peut être exprimée en pixels, ems ou pourcentages.
Les bordures peuvent être appliquées sélectivement en haut, à droite, en bas et à gauche de l'image. Vous pouvez utiliser ces connaissances pour créer un effet comme une ombre portée.
En utilisant une bordure unie en 2 nuances de gris juste sur la bordure droite et inférieure, vous obtenez un effet d'ombre portée.
img { float: gauche; border-right-style: solide; border-right-width: 8px; border-right-color: #CCCCCC; border-bottom-style: solide; border-bottom-width: 8px; border-bottom-color: #999999; marge-droite: 1em; marge en bas: 1em; }
Conseil
Si vous avez des images dans plusieurs divisions (div) d'une page, utilisez des sélecteurs descendants pour les styliser individuellement. Sélecteurs possibles: #content img, #sidebar img, #feature img.
