Si estás interesado en aprender a hacer flotar una imagen a la derecha del texto, te alegrará saber que es una tarea bastante sencilla. Hay muchas situaciones en las que los programadores quieren que una imagen en una página Web aparezca dentro del texto con el texto fluyendo o envuelto alrededor de él. Afortunadamente, manipular imágenes es similar a manipular texto, así que si tienes experiencia con este último, este proceso no debería ser difícil en absoluto.

De hecho, con la propiedad float de CSS, es fácil hacer flotar su imagen a la derecha del texto y hacer que el texto fluya a su alrededor en el lado izquierdo. Utilice este tutorial de cinco minutos para aprender cómo.

Introducción

Para empezar, escriba un párrafo de texto y añada una imagen al principio del párrafo. Esto debe hacerse antes del texto pero después de la etiqueta

):

A continuación, añada un atributo de estilo a la imagen y aplique la propiedad float:

El texto se apisonará contra la imagen, así que agregue algunos márgenes a la imagen para que sea más fácil de leer:

La propiedad margin shorthand aplica márgenes en el orden superior, derecho, inferior e izquierdo (TRBL).

Envolviendo

Y eso es todo. Ahora ves que flotar una imagen a la derecha no es nada difícil. También le puede interesar hacer flotar una imagen a la izquierda y hacerla flotar hacia el centro. Mientras que el primer movimiento es posible, desafortunadamente, usted no puede hacer flotar una imagen al centro, ya que eso requeriría típicamente un diseño de dos columnas.