¿Cómo hacer que un div se expanda verticalmente para envolver el contenido dentro de él?

Question

Tengo un div que envuelve una cantidad de imágenes que se generan dinámicamente. No sé qué tan alta es la lista de imágenes. Mi problema es que el div que contiene las imágenes generadas dinámicamente no se comporta como si albergara ningún contenido; quiero que se extienda a la altura de la lista de imágenes. Cada imagen está envuelta en un div.

Este es el div contenedor:

.block { padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; } 

Este es el marcado generado dinámicamente para (una de) las imágenes:

<div class="block"> 
<div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="45.jpg" BORDER="0"/></div> 
..... 

¿Cómo consigo el block div para extender hacia abajo con el imágenes?

Gracias

Answer 1

El problema que estás observando sucede cuando flotas un elemento, lo que lo quita del flujo normal de los elementos (por flujo normal me refiero a la forma en que los elementos aparecerían sin ningún estilo). Cuando flote un elemento, los demás elementos que todavía están en el flujo normal simplemente lo ignorarán y no le darán cabida, por lo que su div block no extiende la altura completa de su imagen.

Hay algunas soluciones diferentes:

1) Añadir la regla overflow: hidden; a la clase block:

.block { overflow: hidden; padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; } 

2) Añadir un elemento después de su imagen que despeja el flotante:

<div class="block"> 
    <div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="images/login1.png" BORDER="0"/></div> 
    <div style="clear: both;"></div> 
</div> 

Ambos funcionarán, pero prefiero la primera solución.

Answer 2

que tienen una etiqueta div que se expande (horizontal y vertical) en función de lo que tengo en ella. Tengo:

<div id="summary" style="float:right;margin:5px 5px 0;" ALIGN="right"> 

También puse una mesa dentro de ella para sostener toda mi información:

<table style="margin-left:1em; border:2px solid #000000; background-color:#f2f2f2; padding:1px; float:center; clear:right; font-size:85%;"> 

Answer 3

Añadir esto en su archivo CSS:

.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .group {display: inline-block;} 
/* Hides from IE-mac \*/ * html .group {height: 1%;} .group {display: block;} /* End hide from IE-mac */ 

y añadir la "group" clasifique a su div block para que se borre el flotador:

<div class="block group"> 
... 

Answer 4

ELIMINAR float:left de estilo de imagen y height:Auto de estilo de bloque

AÑADIR display:inline-block; en estilo bloque (estilo contenedor)