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:

Dejandomarcas.com

 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):

Dejandomarcas.comLorem 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!

Anuncios

Acerca de Javi Garcia
Web developer at www.dejandomarcas.com

5 Responses to CSS – Rodear una imagen con texto

  1. Chusé Lodois says:

    ¿Qué debo hacer para conseguir un div a dos columnas con una imagen en el centro rodeada de texto por todos los lados??
    Muchas gracias.

  2. Muchas gracias, lo andaba buscando para mi sitio.

  3. Go Here says:

    WOW just what I was searching for. Came here by
    searching for seo in guk mp3

  4. Hi i am kavin, its my first occasion to commenting anywhere, when
    i read this paragraph i thought i could also create comment due to
    this sensible post.

  5. gracias muy buen articulo.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

A %d blogueros les gusta esto: