texto en caja irregular

[seterek]

Hola!
quiero hacer una cosa pero no sé si es posible, al menos no he encontrado nada por ahí que me de una solución.

El caso es que quisiera poner texto a la derecha de una imagen pero que la caja no sea recta, sino que fluya según una forma irregular, podría hacerlo a mano poniendo la caja del texto como absoluta y situando espacios a la izquierda de cada línea hasta que se coloque donde yo quiero, pero me gustaría saber si alguna forma más sencilla de hacerlo.

Os dejo un ejemplo de lo que quiero,
muchas gracias de antemano!

[JavierB]

Hola seterek

Mira si te sirve este enlace:

http://meyerweb.com/eric/css/edge/raggedfloat/demo.html

Saludos,

[seterek]

Muchas gracias JavierB, justo lo acababa de ver, pero ya lo he solucionado haciéndolo como os dije en el otro post, con la capa de texto absoluta sobre la imagen y dando padding-left a cada línea de texto. En mi opinión es menos lioso, no hay que crear varias imágenes.

[MoDoRrO]

y como es eso??? me gusdtaria hacerlo tmb

Gracias

[seterek]

MoDoRro, lo que he hecho es muy "artesanal", está bien para alguna página de diseño especial, pero vamos, mí me ha funcionado muy bien para lo que quería.

La capa de la foto la pones relativa y dentro de esa misma capa pones la de texto, que sea absoluta y la posicionas con top y left donde quieras.
Y luego ya es dar a cada línea el margin-left necesario para que fluya a la derecha de la imagen.

Aquí te dejo el código, espero que te sirva de ayuda:

Código:

<div style="margin-right:10px; position:relative;"><img src="foto.jpg" />

<div style=" position:absolute; width:525px; left:5px; top:0;">
<p>
   <span style="margin-left:100px;">texto texto texto texto texto texto texto texto texto texto texto texto texto texto </span> <br/>
   <span style="margin-left:130px;"> texto texto texto texto texto texto texto texto texto texto texto texto texto texto </span><br/>
   <span style="margin-left:160px;"> texto texto texto texto texto texto texto texto texto texto texto texto texto texto </p>
   <span style="margin-left:170px;"> texto texto texto texto texto texto texto texto texto texto texto texto texto texto </span><br/>
</p>

</div>
  
</div>

[MoDoRrO]

Gracias men!!!

lo probare

SLDS