colonne CSS bug - 5 numero di colonne che mostra solo il 4 (con immagini)

Question

Sto cercando di implementare di Chris Coyier esempio di utilizzo di colonne CSS creare un sistema unico di griglia reattivo di immagini.

ho messo i file di Chris sul mio server e tutto andava bene. L'unica cosa che è cambiato è le immagini reali.

Ora, come si vede sul mio prova pagina , ci sono solo 4 colonne di immagini anziché specificato 5, utilizzando column-count:5;. La quinta colonna è solo spazio bianco senza contenuti.

Questo accade solo quando la finestra del browser è più grande di 1200px. Quando la finestra del browser è inferiore a 1200px, i media query nel calcio e diminuisce il numero di colonne 4, 3, 2, e infine 1. In altre parole, questo bug si verifica solo quando il column-count: è 5 e fino

Questo accade in FF 10, Chrome 17+, e Safari 5 +.

Qualsiasi aiuto sarebbe apprezzato!

Ecco l'HTML rifilato:

<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>

Ecco l'intatta CSS:

* { 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 I have an answer, although it is a workaround, not a fix. I changed up the images so that some were 300px in height and others, 370px. Basically I varied the the height of the images and kept the width of all the images the same, 300px. So the answer is to either not use square images, or if you want to use all square images, use column-count:4 instead of 5.

If anyone can provide further insight into why this happens that would be great.

Answer 2

When my browser hits 1219 px wide (at least as Firesize tells me) I get 5 cols. Below that I get 4 as well. Firefox 10.

Some things that may be going on:

• My vertical scrollbar is exactly 19 px wide
• The border left and right of the Firefox window are 9 px each, making 18px total

It almost seems as one of these is being included in the media query.

---

Edit: kinda weird though, because at first glance the W3 media queries site seems to suggest that:

The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any)

Answer 3

Just in case any one else finds this in their search results it's the fact the images are inline so they have a some space between them see:

How can I eliminate spacing between inline elements in CSS?

I use the font-size: 0 on the section to fix this :)