stoy tratando de implementar @ Chris Coyiejempl de usar columnas CSS para crear una cuadrícula de imágenes receptiva sin interrupciones.

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

Esto solo ocurre cuando la ventana del navegador es mayor a 1200px. Cuando la ventana del navegador es inferior a 1200 px, las consultas de medios se activan y disminuyen el recuento de columnas 4, 3, 2 y finalmente 1. En otras palabras, este error solo ocurre cuando elcolumn-count: es 5 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;
  }
}