Colocar una Imágen con Texto alrededor

Las Imágenes son la portada de una publicación donde el Lector se fija en la primera mirada y a continuación va a por el texto que tiene que ser de calidad pero primero va a la imágen por esto el texto tiene que estar muy bien colocado alrededor de la Imágen.

ahora os explicare el caso más clásico es el de envolver con texto una foto que se ubicará contra el margen izquierdo.

Aqui lo que debemos hacer es “flotar” hacia la izquierda el elemento, en este caso, la imagen.

Para esto, CSS dispone de una propiedad llamada “float”, justamente como su nombre lo indica, sirve para flotar elementos dentro del documento HTML.

La propiedad “float” puede tomar 3 posibles valores:

float: left
(flota el elemento contra la izquierda)

float: right
(flota el elemento contra la derecha)

float: none
(no flota el elemento hacia ningún lado, es la opción por defecto)

Bien, realicemos el caso típico de flotar una imagen contra la izquierda y automáticamente la misma se rodeará con el texto.

Para este caso utilizaremos un DIV contenedor y dentro de el una imagen y un texto.

El código HTML estándar para esto sería:

<div><img style="float:left;" src="URL_imagen" />Texto a mostrar</div>

Nótese que aquí aplicamos la propiedad “float: left” a la etiqueta IMG directamente dentro de la línea HTML y no desde un archivo.

Esta técnica se llama “inline” y si bien es válida, hoy por hoy se recomienda poner las propiedades CSS dentro de un archivo para tal fin. Pero aquí lo hago así para simplificar el código.

Tellus elementum sagittis vitae et leo. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. Imperdiet sed euismod nisi porta. Ultrices gravida dictum fusce ut. Nisi scelerisque eu ultrices vitae auctor eu augue ut lectus. Pellentesque habitant morbi tristique senectus et netus. Tincidunt eget nullam non nisi. Eget duis at tellus at urna condimentum. Convallis a cras semper auctor neque vitae tempus quam. Consectetur a erat nam at.

He utilizado un texto de ejemplo bastante largo para que se aprecie el efecto visual.

Hagamos práctico el ejemplo con imagen a la derecha:

<div>
<img src="imagen.jpg" hspace="5" vspace="5" style="float: right;" />
Texto a mostrar
</div>

Así se vería este ejemplo:

Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Adipiscing elit duis tristique sollicitudin. Consectetur adipiscing elit ut aliquam purus sit. Est pellentesque elit ullamcorper dignissim. Nulla facilisi cras fermentum odio. Tortor id aliquet lectus proin nibh nisl condimentum id venenatis. Vitae justo eget magna fermentum iaculis eu. Cursus in hac habitasse platea dictumst quisque sagittis purus sit. Quis enim lobortis scelerisque fermentum dui.

Hagamos práctico el ejemplo con imagen a la izquierda: "right"

<div>
<img src="imagen.jpg" hspace="5" vspace="5" style="float: right;" />
Texto a mostrar
</div>

Esto se veria asi:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed enim ut sem viverra aliquet eget. Erat imperdiet sed euismod nisi porta. Auctor eu augue ut lectus arcu bibendum at varius. Feugiat in ante metus dictum at. Tellus elementum sagittis vitae et leo. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. Imperdiet sed euismod nisi porta. Ultrices gravida dictum fusce ut. Nisi scelerisque eu ultrices vitae auctor eu augue ut lectus. Pellentesque habitant morbi.

Y ahora un ejemplo con el float por defecto que sería “none”:

tempus imperdiet nulla malesuada pellentesque. Imperdiet sed euismod nisi porta. Ultrices gravida dictum fusce ut. Nisi scelerisque eu ultrices vitae auctor eu augue ut lectus. Pellentesque habitant morbi tristique senectus et netus. Tincidunt eget nullam non nisi. Eget duis at tellus at urna condimentum. Convallis a cras semper auctor neque vitae tempus quam. Consectetur a erat nam at.

En este último ejemplo podemos ver como el texto se coloca directamente después de donde termina la imagen, es decir, sin flotarse hacia ningún lado.
Rodeando con texto otros elementos como videos

Tal cual lo acabamos de hacer con las imágenes, se puede rodear con texto otros elementos, por ejemplo videos.

<div>
<div style="float: left;" />
<iframe width="300" height="200" src="https://www.youtube.com/embed/LauDl7qwcA0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
Texto a mostrar
</div>

Para ellos solo basta reemplazar la imagen por otro DIV que contenga el video y aplicarle a este último DIV la misma propiedad “float”.

Así se vería este ejemplo:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.