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

Question

Estoy tratando de implementar Chris Coyier's ejemplo del uso de columnas CSS para crear una cuadrícula de imágenes receptiva perfecta.

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 ves en mi página de prueba, solo hay 4 columnas de imágenes en lugar de las 5 especificadas, usando column-count:5;. La quinta columna es solo un espacio en blanco sin contenido.

Esto solo sucede cuando la ventana del navegador es superior a 1200px. Cuando la ventana del navegador es inferior a 1200px, las consultas de los medios se activan y disminuyen el recuento de columnas 4, 3, 2 y finalmente 1. En otras palabras, este error solo ocurre cuando el column-count: es de 5 años y más

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

¡Cualquier ayuda sería apreciada!

Aquí está el 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á el CSS intacto:

* { 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 tenían 300 px de altura y otras, 370px. Básicamente, varié la altura de las imágenes y mantuve el ancho de todas las imágenes igual, 300px. Entonces, la respuesta es no usar imágenes cuadradas, o si desea usar todas las imágenes cuadradas, use el conteo de columnas: 4 en lugar de 5.

Si alguien puede proporcionar más información sobre por qué esto sucede, eso sería genial.

Answer 2

Cuando mi navegador llega a 1219 px de ancho (al menos como Disparar me dice) Tengo 5 cols. Debajo de eso también obtengo 4. Firefox 10.

Algunas cosas que pueden estar sucediendo:

• Mi barra de desplazamiento vertical tiene exactamente 19 px de ancho
• El borde a la izquierda y a la derecha de la ventana Firefox son 9 px cada una, haciendo que 18 px sea total

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

---

EDITAR: Sin embargo, un poco raro, porque a primera vista el Sitio de consultas de medios W3 parece sugerir que:

La función de medios de 'ancho' describe el ancho del área de visualización específica del dispositivo de salida. Para medios continuos, este es el ancho de la ventana gráfica (según lo descrito por CSS2, Sección 9.1.1 [CSS21]) incluido el tamaño de una barra de desplazamiento renderizada (Si alguna)

Answer 3

En caso de que alguien más encuentre esto en sus resultados de búsqueda, es el hecho de que las imágenes están en línea, por lo que tienen un espacio entre ellos: ver:

¿Cómo puedo eliminar el espacio entre elementos en línea en CSS?

Uso el tamaño de la fuente: 0 en la sección para solucionar esto :)