CSS – Rodear una imagen con texto

La verdad es que es un efecto bastante sencillito y que da muy buenos resultados. El ejemplo claro sería un periódico, donde podemos observar como el texto rodea a la imagen.

 Si ponemos una imagen y después el texto, nos quedaría algo como esto:

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sapien ante, cursus ut, luctus vel, viverra ut, diam. Curabitur turpis pede, consectetuer a, dictum eu, rutrum sed, diam. Cras ac leo quis pede eleifend laoreet. Integer sollicitudin turpis. Morbi quis risus. Vestibulum sed nulla quis quam rhoncus volutpat. Curabitur orci quam, luctus imperdiet, dapibus vel, aliquet et, turpis. Aliquam dapibus nisi. Nullam arcu quam, dapibus a, porttitor vel, ornare vitae, ligula. Aliquam vulputate. Nunc faucibus. Proin at arcu vitae augue porta volutpat.

 El truco para que la imagen se quede rodeada por el texto es añadirle el estilo float y después la posición (left en este caso):

Lorem ipsum  sit amet, consectetuer adipiscing elit. Fusce sapien ante, cursus ut, luctus vel, viverra ut, diam. Curabitur turpis pede, consectetuer a, dictum eu, rutrum sed, diam. Cras ac leo quis pede eleifend laoreet. Integer sollicitudin turpis. Morbi quis risus. Vestibulum sed nulla quis quam rhoncus volutpat. Curabitur orci quam, luctus imperdiet, dapibus vel, aliquet et, turpis. Aliquam dapibus nisi. Nullam arcu quam, dapibus a, porttitor vel, ornare vitae, ligula. Aliquam vulputate. Nunc faucibus. Proin at arcu vitae augue porta volutpat.

 De esta manera, ya tenemos la posición correcta. Tan solo habría que retocar los márgenes o el padding para dejarlo totalmente justificado.

El código final de la imagen es:

<img src=http://www.dejandomarcas.com/imagenes/logo_gif.gifborder=»0″ alt=»Dejandomarcas.com» style=»float:left» />

Un saludo!