CSS -Spalten Fehler - 5 Spaltenzahl nur Zeigt 4 (mit Bildern)

Question

Ich versuche, Chris Coyiers zu implementieren Beispiel der Verwendung von CSS -Spalten, um ein nahtloses reaktionsschnelles Gitter von Bildern zu erstellen.

Ich habe Chris 'Dateien auf meinen Server gesetzt und alles sah gut aus. Das einzige, was ich veränderte, waren die tatsächlichen Bilder.

Jetzt, wie du auf meinem siehst Testseite, Es gibt nur 4 Spalten mit Bildern anstelle der angegebenen 5, die verwenden column-count:5;. Die fünfte Spalte ist nur Whitespace ohne Inhalt.

Dies geschieht nur, wenn das Browserfenster größer als 1200 PX ist. Wenn das Browserfenster weniger als 1200 PX beträgt, werden die Medienabfragen ein- und verringern die Spaltenzahl 4, 3, 2 und schließlich 1. Mit anderen Worten, dieser Fehler tritt nur auf, wenn die column-count: ist 5 und up

Dies geschieht in FF 10, Chrome 17+ und Safari 5+.

Jede Hilfe wäre geschätzt!

Hier ist das beschnittene HTML:

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

Hier ist das unberührte 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, ich habe eine Antwort, obwohl es sich um eine Problemumgehung handelt, keine Lösung. Ich habe die Bilder so geändert, dass einige 300px in Höhe und andere, 370px waren. Grundsätzlich variierte ich die Höhe der Bilder und hielt die Breite aller Bilder gleich, 300px. Die Antwort besteht also darin, entweder quadratische Bilder zu verwenden oder wenn Sie alle quadratischen Bilder verwenden möchten, verwenden Sie die Spaltenzahl: 4 anstelle von 5.

Wenn jemand weitere Einblicke geben kann, warum dies passiert, wäre das großartig.

Answer 2

Wenn mein Browser 1219 px breit ist (mindestens so Firesize sagt mir) ich bekomme 5 Cols. Darunter bekomme ich auch 4. Firefox 10.

Einige Dinge, die möglicherweise vor sich gehen:

• Meine vertikale Scrollbar ist genau 19 px breit
• Die Grenze links und rechts im Firefox -Fenster liegt jeweils 9 px und macht 18px insgesamt

Es scheint fast, als würde eine davon in die Medienabfrage aufgenommen.

---

Bearbeiten: Ein bisschen seltsam, denn auf den ersten Blick die W3 Medienabfragen Site scheint das zu vermuten:

Die "Breite" -Medienfunktion beschreibt die Breite des gezielten Anzeigebereichs des Ausgabegeräts. Für kontinuierliche Medien ist dies die Breite des Ansichtsfensters (wie in CSS2, Abschnitt 9.1.1 [CSS21] beschrieben) einschließlich der Größe einer gerenderten Scroll -Bar (wenn überhaupt)

Answer 3

Nur für den Fall, dass jemand anderes dies in seinen Suchergebnissen findet, ist es die Tatsache, dass die Bilder inline sind, sodass sie einen gewissen Platz zwischen ihnen haben: Siehe:

Wie kann ich den Abstand zwischen Inline -Elementen in CSS beseitigen?

Ich benutze die Schriftgröße: 0 im Abschnitt, um dies zu beheben :)