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.

Deja un comentario

TAMBIÉN TE INTERESA

veentajas-del-marketplace

Ventajas de los marketplaces en plena escalada de precios

Si vendes productos por la web, deberías apostar por los marketplaces, aún en un momento de inflación alta, en plena escalada de precios. La economía se encuentra en un momento difícil: agosto cerró con una tasa de inflación superior a los dos dígitos (10,4%) por tercer mes consecutivo. La incertidumbre ante el invierno impulsa a

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,

GoPro-HERO11

GoPro HERO11 Black: las nuevas cámaras para los creadores de contenido

La conocida marca de videocámaras GoPro ha lanzando tres nuevas especialmente concebidas para creadores. GoPro HERO11 llega en tres modelos para satisfacer las necesidades de todo tipo de perfiles y creadores de contenidos.   Índice de contenidos1 El sensor de mayor resolución hasta la fecha2 Las tres cámaras GoPro HERO112.1 Principales tecnologías en las tres

camara-motorola-edge-30-ultra

¿200 megapíxeles? Sí, es lo que tiene el nuevo motorola edge 30 ultra

El furor por los megapíxeles parece estar de vuelta en la fotografía de los smartphones, si bien hay expertos que mantienen que más MP no quiere decir que resulte en mejores fotografías. El nuevo motorola edge Ultra llega al mercado con una barbaridad inédita en el mundo de la telefonía. Cabe destacar también que otras