Como flotar unha imaxe á dereita do texto

Este tutorial de cinco minutos explica como

Estás interesado en aprender a flotar unha imaxe á dereita do texto? Se é así, non estás só. Hai moitas situacións nas que os programadores queren que unha imaxe nunha páxina web apareza dentro do texto co texto flúe ou envolve. Afortunadamente, a manipulación de imaxes é semellante á manipulación de texto, polo que se ten experiencia co último, este proceso non debe ser difícil.

De feito, coa propiedade CSS flotante, é fácil flutuar a imaxe á dereita do texto e flúe o texto ao redor do lado esquerdo . Use este tutorial de cinco minutos para saber como.

Comezando

Para comezar, escriba un parágrafo de texto e engada unha imaxe ao comezo do parágrafo. Isto debe facerse antes do texto pero despois da etiqueta

:

Duis aute irure dolor sed do eiusmod temporal incididunt en reprehenderit in voluptate. Cupidatat non proide, ten que traballar e perda a máquina. Sumpte a culpa quis nostru exercita excepteur sint occaecat. Mollit anim id est laborum.

A continuación, engade un atributo de estilo á imaxe e aplica a propiedade flotante:

style = "float: right;" />

O seu texto será amontoado cara á imaxe, así que engade algunhas marxes á imaxe para facilitar a lectura:

margin: 0 5px 0 0; " />

A propiedade de taquigrafía de marxe aplica as marxes na orde superior, dereita, inferior e esquerda ( TRBL ).

Envoltando

E iso o fai. Agora ves que flotar unha imaxe á dereita non é nada difícil. Tamén pode estar interesado en flotar unha imaxe á esquerda e flotar ao centro. Aínda que o primeiro movemento é posible, lamentablemente non podes flutuar unha imaxe no centro, xa que normalmente requiriría un deseño en dúas columnas.