Foros del Web » Creando para Internet » HTML »

texto que envuelva a una imagen

Estas en el tema de texto que envuelva a una imagen en el foro de HTML en Foros del Web. Hola compis del foro. A ver, tengo un archivo de texto y una imagen, leo el contenido del archivo y la imagen (la cual se ...
  #1 (permalink)  
Antiguo 10/05/2009, 06:23
overon37
Invitado
 
Mensajes: n/a
Puntos:
Mensaje texto que envuelva a una imagen

Hola compis del foro.

A ver, tengo un archivo de texto y una imagen, leo el contenido del archivo y la imagen (la cual se alinea a la derecha del texto), es decir una capa para el texto y otra capa para la foto, ambas con position:relative y float:left.

La pegas evidente es que si el texto sobrepasa lo que es el alto de la imagen este continua hacia abajo, como es lógico, dentro de su capa.

La cuestión es como conseguir que el texto envuelve a la imagen, es decir, cuando el texto sobrepase lo que es el alto de la imagen (de la capa de la imagen) este se expanda para ocupar lo que es el ancho de la imagen (de su capa).

Mediante tablas no es la solución, hay algún medio?

asias mil
  #2 (permalink)  
Antiguo 11/05/2009, 11:37
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 11 años, 6 meses
Puntos: 2122
Respuesta: texto que envuelva a una imagen

Tema trasladado desde PHP
  #3 (permalink)  
Antiguo 11/05/2009, 12:27
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: texto que envuelva a una imagen

Eso es algo muy básico de lograr, y no debes ocupar la propiedad position:relative... solo float en la imagen.

Te dejo un ejemplo.
__________________
Diego Escares
• Twitter: @diegoescares
• Web: diegoescares.com
  #4 (permalink)  
Antiguo 11/05/2009, 12:40
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: texto que envuelva a una imagen

Puedes lograrlo colocando tanto el texto como la imagen dentro de la misma etiqueta <p>. A la imagen le das una clase
Código html:
Ver original
  1. <p><img class="derecha" ... />... bla bla bla ...</p>
Código css:
Ver original
  1. .derecha img {float: right; margin: Xpx;}
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:45.