Disculpad este es el código que estoy poniendo, pero como es muy largo el pie de foto impide que el contenido fluya alrededor del pie y de la foto.
<div style="float:left; margin-right: 1em; margin-bottom: 2em; margin-top: 3em"> <img alt="libros" src="../Images/libros.png" /><br /> <div style="text-align: center;"> pie de foto: ejemplo de pie de foto. Ejemplo de pie de foto. Ejemplo de pie de foto </div> </div>
Gracias de antemano por todo.
Respuestas
La solución más sencilla en este caso es que limites el tamaño máximo del elemento <div> flotante que engloba tanto a la imagen como a su pie de foto. Ejemplo:
<div style="width: 250px; float:left; margin-right: 1em; margin-bottom: 2em; margin-top: 3em"> <img alt="libros" src="../Images/libros.png" /><br /> <div style="text-align: center;"> Pie de foto: ejemplo de pie de foto. Ejemplo de pie de foto. Ejemplo de pie de foto </div> </div>
Para que esta solución no se "rompa" cuando la imagen es muy grande, tendrías que limitar el tamaño de la imagen a la máxima anchura del elemento <div> padre. Eso se consigue con la propiedad max-width de CSS:
<div style="width: 250px; float:left; margin-right: 1em; margin-bottom: 2em; margin-top: 3em"> <img style="max-width: 100%;" alt="libros" src="../Images/libros.png" /><br /> <div style="text-align: center;"> Pie de foto: ejemplo de pie de foto. Ejemplo de pie de foto. Ejemplo de pie de foto </div> </div>
Por último, cuando no puedas establecer a mano la anchura de este elemento flotante (como el valor 250px utilizado en el ejemplo anterior), puedes usar porcentajes para indicar su anchura respecto a la anchura del elemento en el que se encuentra:
<div style="width: 30%; float:left; margin-right: 1em; margin-bottom: 2em; margin-top: 3em"> <img style="max-width: 100%;" alt="libros" src="../Images/libros.png" /><br /> <div style="text-align: center;"> Pie de foto: ejemplo de pie de foto. Ejemplo de pie de foto. Ejemplo de pie de foto </div> </div>
@javiereguiluz
Muchísimas gracias por vuestra dedicación
@DigitalReasons1