Usar CSS para hacer flotar imágenes a la izquierda del texto en una página web

Usar CSS para hacer flotar imágenes a la izquierda del texto en una página web

Usar CSS para hacer flotar imágenes a la izquierda del texto en una página web

VALORACIÓN DEL ARTÍCULO:
5/5


Un elemento de nivel de bloque en un documento HTML (por ejemplo, una página web) aparece en orden secuencial. Para modificar el orden para que la página se vea más atractiva o para mejorar su utilidad, tendrás que envolver los bloques, incluyendo las imágenes, de modo que el texto de esa página fluya a su alrededor.

En términos web, este efecto se conoce como «floating» de la imagen. Este estilo se consigue con la propiedad CSS para «float». Esta propiedad permite que el texto fluya alrededor de la imagen alineada a la izquierda hacia su lado derecho. O alrededor de una imagen alineada a la derecha a su lado izquierdo.

Comience con HTML

Lo primero que tendrá que hacer es tener algo de HTML para trabajar. Para nuestro ejemplo, escribiremos un párrafo de texto y añadiremos una imagen al principio del párrafo (antes del texto, pero después de la etiqueta de apertura). A continuación se muestra el aspecto de la marca de revisión HTML:

Por defecto, nuestra página web se mostraría con la imagen sobre el texto, ya que las imágenes son elementos de nivel de bloque en HTML. Esto significa que el navegador muestra saltos de línea antes y después del elemento de imagen por defecto. Cambiaremos esta apariencia por defecto girando a CSS. Primero, sin embargo, añadiremos un valor de clase a nuestro elemento de imagen. Esa clase actuará como un «gancho» que usaremos en nuestro CSS más tarde.

Nótese que esta clase de «izquierda» no hace nada por sí sola. Para que podamos lograr el estilo deseado, necesitamos usar CSS a continuación.

Estilos de CSS

Con nuestro HTML en su lugar (incluyendo nuestro atributo de clase «left») ahora podemos pasar a CSS. Agregaríamos una regla a nuestra hoja de estilo que haría flotar esa imagen y también agregaríamos un poco de relleno al lado de ella para que el texto que finalmente se envuelva alrededor de la imagen no se choque con ella demasiado cerca. Aquí está el CSS que puedes escribir:

.left {
float: izquierda;
acolchado: 0 20px 20px 0;
}

Este estilo hace flotar la imagen hacia la izquierda y agrega un poco de relleno (usando un poco de taquigrafía CSS) a la derecha e inferior de la imagen.

Si usted revisó la página que contiene este HTML en un navegador, la imagen ahora estaría alineada a la izquierda y el texto del párrafo aparecería a su derecha con una cantidad apropiada de espacio entre los dos. Note que el valor de la clase "left" que usamos es arbitrario. Podríamos haberlo llamado cualquier cosa porque el término "izquierda" no hace nada por sí solo. Cualquiera que sea el término que utilice debe tener un atributo de clase en el HTML que funcione con un estilo CSS real que dicte los cambios visuales que desea realizar.

Formas alternativas de lograr estos estilos

Este enfoque de dar al elemento de imagen un atributo de clase y luego usar un estilo CSS general que haga flotar el elemento es sólo una manera de lograr este aspecto de "imagen alineada a la izquierda". También puede quitar el valor de la clase de la imagen y darle estilo con CSS escribiendo un selector más específico. Por ejemplo, veamos un ejemplo donde esa imagen está dentro de una división con un valor de clase "main-content".

DIFUNDE LA PALABRA- En este ejemplo, tenemos una imagen de una foto de la cabeza, por lo que este texto probablemente sea sobre la persona a la que va dirigida la foto.  

Para cambiar el estilo de esta imagen, puedes escribir este CSS:

.main-content img { 
float: izquierda;
acolchado: 0 20px 20px 0;
}

En este escenario, nuestra imagen estaría alineada a la izquierda, con el texto flotando alrededor como antes, pero no necesitábamos añadir un valor extra de clase a nuestro marcado. Hacer esto a escala puede ayudar a crear un archivo HTML más pequeño, que será más fácil de administrar y también puede ayudar a mejorar el rendimiento.

Evite los estilos en línea

Por último, puede incluso añadir los estilos directamente en su marcación HTML, de esta manera:

Este método se llama "estilos en línea". No es aconsejable porque combina el estilo de un elemento con su marcado estructural. Las mejores prácticas de la web dictan que el estilo y la estructura de una página deben permanecer separados. Esta segregación es especialmente útil cuando su página necesita cambiar su diseño y buscar diferentes tamaños de pantalla y dispositivos con un sitio web sensible.

Tener el estilo de la página entrelazado en el HTML hará que sea mucho más difícil crear consultas de medios que ajusten el aspecto de su sitio según sea necesario para esas diferentes pantallas.

Deja un comentario

TAMBIÉN TE INTERESA

monitores-Samsung-M8

Samsung M8: un monitor que es también smart tv y mucho más…

Hay quien usa tres monitores a la vez para trabajar. El segmento de los monitores de PC avanza rápidamente. Hace solo unos años la tendencia era adquirir monitores curvos, pero hoy la dinámica vuelve al llano y, por supuesto, a la extrema delgadez. No obstante, Samsung va más allá con su nuevo monitor Samsung M8.

Huawei-P50-Pro

Las mejores aplicaciones para disfrutar el nuevo Huawei P50 Pro

Huawei ha anunciado los nuevos smartphones Huawei P50 Pro y P50 Pocket, las últimas incorporaciones a su icónica línea de productos de la Serie P. Con cada lanzamiento de la Serie P, la marca china sigue mostrando toda su capacidad innovadora ya sea a nivel de rendimiento y especificaciones de los terminales como por todo

Poly-Sync-10

Poly lanza un nuevo altavoz inteligente para el trabajo híbrido: Sync 10

Poly ha anunciado recientemente el lanzamiento del Poly Sync 10, la última incorporación a su conocida familia de altavoces inteligentes y manos libres, Poly Sync. El nuevo dispositivo responde a las necesidades emergentes de empresas y profesionales, que tienen que desenvolverse de forma eficiente en un contexto de trabajo cada vez más híbrido, flexible y

CCleaner 2022

Novedades importantes con la herramienta CCleaner

Hoy vamos a hablar de CCleaner, una herramienta que cuenta con cientos de millones de usuarios domésticos y empresariales en todo el mundo que trabaja para optimizar el rendimiento de los equipos, mejorar la seguridad de los mismos y prolongar la vida útil de los ordenadores.   CCleaner es el rey del mantenimiento en lo

resistencia-Cat-phones

Cat phones, una década brillando con los dispositivos más resistentes

Hay marcas que huyen del mainstream y son casos de éxito. Cat phones es una de esas compañías que se ha alejado de lo convencional para centrarse en otras necesidades y convertirse así en grandes expertos en la resistencia de sus dispositivos. De la mano de Bullitt Group, la firma celebra 10 años de trayectoria