Cómo hacer flotar fácilmente una imagen a la derecha del texto

Cómo hacer flotar fácilmente una imagen a la derecha del texto

Cómo hacer flotar fácilmente una imagen a la derecha del texto

VALORACIÓN DEL ARTÍCULO:
5/5


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.

TAMBIÉN TE INTERESA

dni en el móvil

Oficial: ya es posible llevar tu DNI en el móvil en España

Teníamos tarjetas bancarias, de salud, tarjetas para el transporte… pero faltaba lo más importante: el Documento Nacional de Identidad. Bueno pues desde ya es posible tener el DNI en el móvil en España. El Consejo de Ministros ha aprobado un real decreto que marca un antes y un después en la forma de acreditar la

vivo v50 Lite

Asequible y muy fino en todos los sentidos: sale a la venta el vivo v50 Lite

La marca vivo, de la cual hemos hablado recientemente por su estrategia a futuro con la robótica e IA, ha dado un nuevo paso adelante en la evolución de los smartphones con el lanzamiento del vivo V50 Lite en España. Este dispositivo combina un diseño sofisticado, potencia de alto rendimiento y resistencia excepcional, adaptándose a

estafas con criptomonedas

Estafas con criptomonedas: cómo no caer en ellas

Para bien o para mal, el sector de las criptomonedas ocupa asiduamente titulares en toda la prensa mundial. Y últimamente, las noticias giran en torno a la seguridad, así que no está de más recordar claves o consejos para evitar estafas con criptomonedas. Han pasado ya algunas semanas, pero conviene señalar dos recientes sucesos que

marca vivo

La marca vivo atisba un futuro con robots en nuestras casas

La industria tecnológica avanza a pasos agigantados, y en este escenario, la marca vivo se está postulando desde China como uno de los actores clave en la innovación digital. Durante la Conferencia Anual Boao Forum 2025 for Asia, celebrada en Boao, Hainan, la compañía ha presentado su nueva visión del futuro, marcada por la convergencia