Error de columnas CSS: conteo de 5 columnas que solo muestra 4 (con imágenes)

Question

Estoy intentando implementar el example de Chris Coyier para usar columnas de CSS para crear una cuadrícula de imágenes sin problemas.

Puse los archivos de Chris en mi servidor y todo se veía bien. Lo único que cambié fueron las imágenes reales.

Ahora, como puede ver en mi test page, solo hay 4 columnas de imágenes en lugar de las 5 especificadas, usando column-count:5;. La quinta columna es solo espacios en blanco sin contenido.

Esto solo ocurre cuando la ventana del navegador es mayor que 1200px. Cuando la ventana del navegador es menor que 1200px, las consultas de medios entran en acción y disminuyen el conteo de columnas 4, 3, 2 y finalmente 1. En otras palabras, este error solo ocurre cuando el column-count: es 5 y sube

Esto sucede en FF 10, Chrome 17+ y Safari 5+.

¡Cualquier ayuda sería apreciada!

Aquí está el código HTML recortado:

<section id="photos"> 

     <img src="images/iso_o.jpg" alt="Isometric" /> 

     <img src="images/iso_o.jpg" alt="Isometric" /> 

     <img src="images/iso_o.jpg" alt="Isometric" /> 

     <img src="images/iso_o.jpg" alt="Isometric" /> 

     <img src="images/iso_o.jpg" alt="Isometric" /> 

     <img src="images/iso_o.jpg" alt="Isometric" /> 

     ...      

</section> 

Aquí está la CSS sin tocar:

* { margin: 0; padding: 0; } 

#photos { 
    /* Prevent vertical gaps */ 
    line-height: 0; 

    -webkit-column-count: 5; 
    -webkit-column-gap: 0px; 
    -moz-column-count: 5; 
    -moz-column-gap:  0px; 
    column-count:   5; 
    column-gap:   0px; 

} 
#photos img { 
    /* Just in case there are inline attributes */ 
    width: 100% !important; 
    height: auto !important; 
} 

@media (max-width: 1200px) { 
    #photos { 
    -moz-column-count: 4; 
    -webkit-column-count: 4; 
    column-count:   4; 
    } 
} 
@media (max-width: 1000px) { 
    #photos { 
    -moz-column-count: 3; 
    -webkit-column-count: 3; 
    column-count:   3; 
    } 
} 
@media (max-width: 800px) { 
    #photos { 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    column-count:   2; 
    } 
} 
@media (max-width: 400px) { 
    #photos { 
    -moz-column-count: 1; 
    -webkit-column-count: 1; 
    column-count:   1; 
    } 
} 

Answer 1

Ok tengo una respuesta, aunque es una solución, no una solución. Cambié las imágenes para que algunas tuvieran 300 px de altura y otras, 370 px. Básicamente varié la altura de las imágenes y mantuve el ancho de todas las imágenes iguales, 300px. Entonces, la respuesta es no usar imágenes cuadradas, o si quiere usar todas las imágenes cuadradas, use conteo de columnas: 4 en lugar de 5.

Si alguien puede proporcionar una mayor comprensión de por qué sucede esto, sería genial.

Answer 2

Cuando mi navegador golpea 1219 px de ancho (al menos como Firesize me dice) consigo 5 cols. Debajo, obtengo 4 también. Firefox 10.

Algunas cosas que pueden estar pasando:

• Mi barra de desplazamiento vertical es exactamente 19 píxeles de ancho
• la orilla izquierda y derecha de la ventana de Firefox son 9 píxeles cada una, haciendo 18px total de

Casi parece que uno de estos se está incluyendo en la consulta de medios.

---

Editar: un poco extraño, sin embargo, porque a primera vista la W3 media queries site parece sugerir que:

La función de los medios de comunicación ‘ancho’ describe el ancho del área de visualización específica del dispositivo de salida. Para los medios continuos, esto es el ancho de la ventana gráfica (como se describe por CSS2, sección 9.1.1 [CSS21]) incluyendo el tamaño de una barra de desplazamiento mostrada (si los hay)

Answer 3

Sólo en caso de cualquier otra persona encuentra esto en su lista de resultados es el hecho de que las imágenes están en línea para que tengan un poco de espacio entre ellos, véase:

How can I eliminate spacing between inline elements in CSS?

uso el font-size: 0 en la sección para arreglar esto :)