CSS: Ignorar la altura de los divs cuando está flotando

Estoy tratando de mostrar algunas imágenes. Todos ellos tienen el mismo ancho pero diferente altura. estoy tratando de hacer algo como: correct image CSS: Ignorar la altura de los divs cuando está flotando

nombre de la clase de cada cuadro es pic

<img class = "pic" src = .... />

En la hoja de estilo que se especifica el flotador: atributo izquierda:

.pic{ 
    float:left 
}

El fin el resultado no es el esperado, mientras que cada fila se alinea verticalmente después de la div más alta de la fila anterior: wrong

¿Hay alguna manera de resolver mi problema en cross browser css?

Fuente

2012-01-12 Ionut

Este es un examen excelente cómo escribir una pregunta –

Puede hacerlo sin marcado adicional con CSS3 column-count, suponiendo que al menos tenga un elemento que lo contenga.

Demostración: http://jsfiddle.net/ThinkingStiff/NcxPr/

HTML:

<div id="container"> 
<img class="image" src="http://farm1.staticflickr.com/205/494701000_744cc3a83a_z.jpg" /> 
<img class="image" src="http://farm5.staticflickr.com/4028/4287569889_f6a4fca31b_z.jpg" /> 
<img class="image" src="http://farm3.staticflickr.com/2340/2421926504_d8509d0a98_z.jpg" /> 
<img class="image" src="http://farm1.staticflickr.com/197/503792921_fedf8ba47e_z.jpg" /> 
<img class="image" src="http://farm2.staticflickr.com/1153/741035029_f394e11a1f_z.jpg" /> 
<img class="image" src="http://farm7.staticflickr.com/6213/6243090894_8b8dd862cd_z.jpg" /> 
<img class="image" src="http://farm2.staticflickr.com/1339/1157653249_dbcc93c158_z.jpg?zz=1" /> 
<img class="image" src="http://farm3.staticflickr.com/2570/4220856234_029e5b8348_z.jpg?zz=1" /> 
</div>

CSS:

#container { 
    column-count: 3; 
    column-fill: balance; 
    column-gap: 10px; 
    width: 330px; 
} 

.image { 
    display: block; 
    margin-bottom: 10px; 
    width: 100px; 
}

Salida:

enter image description here

Fuente

2012-01-12 23:31:10 ThinkingStiff

¡Genial! El único inconveniente de esto es que tengo que saber y especificar la altura de todas las imágenes. – Ionut

@lonut No. Acabo de hacer eso en la demostración para dar la altura de las imágenes. No es necesario. – ThinkingStiff

@lonut Lo actualicé con algunas imágenes reales y eliminé las alturas. – ThinkingStiff

Lamentablemente, no se puede hacer esto con CSS2/3.

Hay esjQuery Masonry, un script bastante pequeño que emula float: top; y funciona bien.

Fuente

2012-01-12 22:45:41 Blender

Eso suena genial, pero estoy tratando de evitar JS mientras estoy trabajando con JSF2 – Ionut

Solo para agregar a su respuesta seleccionada, asegúrese de especificar un 'min-width' para el contenedor. Tus columnas se desbordarán si no lo haces. – Blender

¿Puede agregar un margen adicional?

Si es así, usted podría hacer 3 columnas con divs flotantes:

<div class="column"> 
    <img src="1.jpg" /> 
    <img src="4.jpg" /> 
</div> 

<div class="column"> 
    <img src="2.jpg" /> 
    <img src="5.jpg" /> 
</div> 

<div class="column"> 
    <img src="3.jpg" /> 
    <img src="6.jpg" /> 
</div>

o simplemente utilizar jQuery para hacer eso por usted.

Fuente

2012-01-12 22:50:19 Adaz

CSS: Ignorar la altura de los divs cuando está flotando

Respuesta

Cuestiones relacionadas