Si vous souhaitez apprendre à faire flotter une image à droite du texte, c'est une tâche assez simple. Il existe de nombreuses situations dans lesquelles les programmeurs souhaitent qu'une image sur une page Web apparaisse à l'intérieur du texte avec le texte flottant ou enroulé autour d'elle. Manipulation d'images est similaire à la manipulation de texte, donc si vous avez de l'expérience avec ce dernier, ce processus ne devrait pas être difficile du tout.
En fait, avec la propriété CSS float, il est facile de faire flotter votre image à droite du texte et de faire en sorte que le texte l'entoure sur le côté gauche. Utilisez ce didacticiel de cinq minutes pour apprendre comment.
Configurer une mise en page avec Float
Cette mise en page de base créera un espace pour votre texte et fera flotter une image à droite de ce texte. Certes, ces mises en page peuvent devenir plus compliquées, mais cet exemple vous montrera le principe de base du travail avec les flottants et le texte.
En supposant que vous ayez déjà un document HTML avec lequel vous travaillez et une feuille de style CSS distincte, commencez par créer un nouveau div qui servira de ligne contenant votre élément flottant.
Donnez à cette nouvelle div deux classes, container et clearfix. Il existe de nombreuses façons de gérer cela, et les noms sont entièrement à votre choix, mais ils vous aideront à rester organisé et à établir votre mise en page.
-
Dans votre CSS, définissez comment vous voulez que votre conteneur s'intègre dans votre mise en page globale. Cet exemple va juste en faire une ligne pleine largeur.
.récipient {
largeur: 100 % ;
hauteur: 25 rem ;
} -
Ensuite, occupez-vous de la classe clearfix. Le clearfix est nécessaire car float peut créer des problèmes étranges dans votre mise en page. La définition de la propriété "overflow" dans le clearfix empêche les éléments flottants de déborder de leur espace désigné.
.clearfix {
débordement: automatique ;
} -
Maintenant, vous pouvez créer un élément dans votre conteneur div et le faire flotter vers la droite. Si vous enroulez du texte autour d'une image, ce serait votre image. Créez l'élément et attribuez-lui une classe pour la propriété float.
-
Créez la classe pour votre flotteur. Vous voudrez probablement aussi y ajouter du style, si vous créez des éléments plus identiques. Sinon, vous pouvez appliquer une classe distincte pour votre style.
.Flotter à droite {
Flotter à droite;
largeur: 300px ;
hauteur: 200px ;
couleur de fond: rouge ;
marge: 0 0 0.5rem 0.5rem
} -
Si vous cherchez à envelopper du texte autour de cet élément flottant, insérez votre texte maintenant. Placez-le n'importe où dans le conteneur, avant ou après l'élément flottant.
Du texte
Plus de texte
...etc.
-
Rafraîchissez votre page et vérifiez le résultat.
Emballer
Et ça le fait. Vous voyez maintenant que faire flotter une image vers la droite n'est pas difficile du tout. Vous pouvez également être intéressé à faire flotter une image vers la gauche et à la faire flotter vers le centre. Bien que le premier mouvement soit possible, vous ne pouvez malheureusement pas faire flotter une image vers le centre, car cela nécessiterait généralement une mise en page à deux colonnes.