CSS-column-count nicht eingehalten
Gibt es eine ähnliche Frage hier keine wirkliche Antwort: CSS Spalten Fehler — 5 Spalte count zeigt nur 4 (mit Bildern)
Ich bin mit column-count
zur Anzeige von Elementen in den Spalten (in diesem Fall eine Reihe von section
- Elemente, aber dies geschieht unabhängig davon, das element verwendet (offensichtlich)).
Das problem ist, dass Chrome und Firefox (habe nicht versucht andere) nicht immer die Achtung der angegebenen Spaltenanzahl.
Wenn ich es auf 4, manchmal 4 und manchmal ist es weniger als 4 (nie mehr, zum Glück).
Wenn ich mit Firebug (oder ähnliches) zum ändern der Höhe von einigen der Elemente in den Spalten manchmal die Spalten springen, um von 3 auf 4.
Dies ist wirklich merkwürdig und wirklich ärgerlich und ich hoffe, dass jemand weiß, warum dies geschieht, und hoffentlich, wie es zu beheben.
Hier ein JSFiddle Anzeige das problem: http://jsfiddle.net/NY2Zx/ Sie können spielen, um mit den Maßen der Bilder, um die Anzahl der Spalten ändern.
Dank
- auch der Wechsel
margin-bottom
zu9px
oder weniger funktioniert !!!
Du musst angemeldet sein, um einen Kommentar abzugeben.
In deinem Beispiel (jsfiddle), es gibt 5 Elemente gleicher Größe verteilt werden in 4 Spalten. Da Sie nicht passen nebeneinander (Sie sind mehr als 4) , die erste Spalte enthält 2 Elemente. Definiert die Höhe des Behälters, so dass die zweite Spalte wird auch erhalten, 2 Elemente, und so gibt es eine übrigen für die Dritte Säule und keine für die vierte Spalte. Es sind vier Spalten, aber der vierte ist einfach leer...
In anderen Worten: Die Höhe des Containers ist bestimmt durch die minimale Höhe, die erforderlich ist, um passen alle Elemente in der Anzahl der Spalten. Sobald das geschehen ist, wird der Inhalt gefüllt werden, in den Spalten von Links beginnend, und jede Spalte so viel Inhalt, wie passt hinein.
überprüfen Sie diese http://www.w3.org/TR/css3-multicol/#pseudo-algorithm
JSFiddle Beispiel ist in Ordnung, wenn geschrieben, in der lokalen html-Datei geladen und in firefox und chrome. Versuchen Sie, Breite div-element.
hier arbeiten Beispiel, aber mit image-wrap-element.
Ändern, wenn line-height dann Fehler wieder da.
http://jsfiddle.net/NY2Zx/4/
Warum auch immer, ich bin mir nicht sicher, warum, mit einer leeren Absatz hinter dem text-reflow-Spalten wieder. Dies ist keine optimale Lösung, wie es sollte fließen, ohne leere Elemente, aber es ist eine mögliche schnelle Lösung, die ich begegnet bin, für jemanden, der dieses problem immer noch.