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

position css

Question

Tengo un div que envuelve una serie 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 alojara ningún contenido; quiero que se extienda a la altura de la lista de imágenes. Cada imagen está envuelta en un div.

Esta es la envoltura div:

.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 que el block div se extienda hacia abajo con las imágenes?

Gracias

Answer 1

Agregue 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 agrega la clase " group " a tu div block para que el flotador se borre:

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

Answer 2

El problema que estás observando ocurre cuando haces flotar un elemento, lo que lo saca del flujo normal de los elementos (por flujo normal me refiero a la forma en que los elementos aparecerían sin estilo). Cuando haces flotar un elemento, los otros elementos que aún se encuentran en el flujo normal simplemente lo ignorarán y no le darán espacio, por lo que tu división de block no extiende la altura completa de tu imagen.

Hay algunas soluciones diferentes:

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

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

2) Agregue un elemento después de su imagen que borra la flotación:

<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 3

QUITE el float:left del estilo de imagen y height:Auto del estilo de bloque

display:inline-block; ADD display:inline-block; en estilo de bloque (estilo contenedor)

Answer 4

Tengo una etiqueta div que se expande (horizontal y verticalmente) dependiendo de lo que tengo en ella. Yo tengo:

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

También puse una tabla dentro de ella para guardar 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 5

Yo tuve el mismo problema. Obtuve el elemento de envoltura para envolver el contenido configurando la visualización del elemento de envoltura en "tabla". Así que para tu situación prueba

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