css - tamaño - Div no tiene altura, incluso si tiene contenido

texto ajustable css

Question

Esta pregunta ya tiene una respuesta aquí:

• CSS: DIV sin altura en el conjunto de flotadores 3 respuestas

Tengo un <div> que tiene algo de <img> . Cada <img> está dentro de su propio <div> . El problema es que el div exterior no está tomando automáticamente la altura del contenido aunque yo establezca su altura en auto. También para mostrar los divs internos en línea los puse a float: left . Pero si quito el flotador, el div exterior se comporta normalmente y toma la altura del contenido. Pero necesito que las imágenes estén en línea. ¿Alguien puede ayudarme?

JSFiddle

HTML:

<div id="gallery">
    <div class="gal-foto">
        <img src="http://farm3.staticflickr.com/2819/10183644713_c1f49eb81f_b.jpg" class="gal-img">
    </div>
    <div class="gal-foto">
        <img src="http://farm4.staticflickr.com/3694/10183642403_0c26d59769_b.jpg" class="gal-img">
    </div>
    <div class="gal-foto">
        <img src="http://farm4.staticflickr.com/3764/10183532675_0ce4a0e877_b.jpg" class="gal-img">
    </div>
    <div class="gal-foto">
        <img src="http://farm6.staticflickr.com/5331/10183598286_9ab37e273c_b.jpg" class="gal-img">
    </div>
    <div class="gal-foto">
        <img src="http://farm6.staticflickr.com/5334/10183535585_04b18fa7da_b.jpg" class="gal-img">
    </div>
</div>

CSS:

#gallery {
    border: 1px solid;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
    height: auto;
    margin-top: 20px;
    padding: 15px;
}
.gal-foto {
    float: left;
    margin: 3px;
    position: relative;
}
.gal-img {
    display: block;
    max-height: 150px;
    max-width: 150px;
}

Answer 1

Agrega esto a tu archivo css:

.clear{
clear:both;
}

Ahora, antes de cerrar cada div , agregue esta declaración: <div class="clear"></div>

Answer 2

Agregue la clase clearfix a su contenedor principal:

.clearfix:before,
.clearfix:after {
   content: ''/0020'';
   display: block;
   overflow: hidden;
   visibility: hidden;
   width: 0;
   height: 0;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Llámalo en tu contenedor principal:

<div class="clearfix" id="gallery">
...
</div>

Answer 3

Apenas agregue overflow: auto; como abajo:

 #gallery {
        border: 1px solid;
        border-radius: 10px 10px 10px 10px;
        box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
        height: auto;
        margin-top: 20px;
        padding: 15px;
        overflow: auto;
    }

Answer 4

Así solo escribe #gallery en overflow:hidden;

demo

css

#gallery {
    border: 1px solid;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
    height: auto;
    margin-top: 20px;
    padding: 15px;
    overflow:hidden;
}

Answer 5

un método: configurar .gal-foto para display: inline-block

o puede borrar el archivo #gallery , agregue estos

#gallery:after{
   content: " ";
   display: table;
   clear: both;
}

Answer 6

http://jsfiddle.net/WVL9a/

Agregue lo siguiente:

CSS:

.clearer { clear: both; }

HTML:

<div id="gallery">
    ....
    <div class="clearer"></div>
</div>

Answer 7

Vea la demostración aquí . Apenas agregue overflow: auto; a su contenedor principal.

#gallery {
    border: 1px solid;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
    height: auto;
    margin-top: 20px;
    padding: 15px;
    overflow: auto;
}