Dynamisches Float-Layout mit CSS
Lassen Sie mich versuchen zu erklären, was ich erreichen möchte. Ich möchte, dass X-Boxen mit einer bestimmten Breite (250 px) gesetzt werden, aber dynamische Höhe im Körper platziert wird. Aber ich möchte, dass sie so kompakt wie möglich sind, kein unnötiger leerer Raum zwischen ihnen.
Wenn nun alle Boxen die gleiche Breite und Höhe hätten, wäre das einfach. Ich könnte zum Beispiel einfach float:left; auf sie setzen. Aber wenn die Höhe der Boxen dynamisch ist und alle Boxen eine zufällige Höhe haben, lande ich mit Leerzeichen zwischen den Boxen.
Lassen Sie mich zwei Beispiele zeigen:
Das ist was ich will:
Das ist, was ich am Ende habe:
Dies ist mein CSS:
%Vor%HTML-Beispiel für eine Box:
%Vor%Vollständiger Quellcode: Ссылка
Gibt es eine Möglichkeit, dies mit CSS zu erreichen? Danke für jede Hilfe oder Anleitung!
9 Antworten
Nach dem, was ich vorher gesehen habe, ist das, was Sie erreichen wollen, kaum möglich, wenn nicht sogar unmöglich mit CSS. Was Sie im Grunde wollen, ist ein Layout ähnlich Pinterest, können Sie ihre Website für eine Referenz überprüfen, wenn Sie nicht sicher sind, wovon ich spreche.
Von hier aus können Sie ein bisschen mehr darüber erfahren, wie Pinterest-Layout gemacht wurde und ob es Alternativen gibt - CSS-Frameworks , jQuery-Plugins und so weiter.
Was ich bei einer kurzen Suche für Sie gefunden habe, wobei ich Folgendes im Hinterkopf habe:
Zusätzlich gibt es eine kurze Erklärung von Evan Sharp, der den Code für das Pinterest-Layout geschrieben hat:
Ich habe das Pinterest-Skript geschrieben. Hier ist die Basis, wie es funktioniert:
Vorher: Positionieren Sie unbedingt die Pin-Container Spalte bestimmen width Bestimmen Sie den Abstand zwischen den Spalten (der Gosse)
Einrichten eines Arrays: Abrufen der Breite des übergeordneten Containers; berechne das # von Spalten, die passen Erstellen Sie ein leeres Array mit einer Länge, die gleich ist die Anzahl der Spalten Verwenden Sie dieses Array, um die Höhe jeder Spalte als zu speichern Sie erstellen das Layout, z. Die Höhe der Spalte 1 wird als gespeichert Array [0]
Schleife durch jeden Stift: Setzen Sie jeden Stift in die kürzeste Spalte am Moment ist es hinzugefügt "links:" === die Spalte # (Index Array) mal die Spaltenbreite + Rand "top:" === Der Wert im Array (Höhe) für die kürzeste Spalte zu dieser Zeit. Schließlich fügen Sie die Höhe des Pins hinzu die Spaltenhöhe (Array-Wert)
Das Ergebnis ist leicht. In Chrome eine ganze Seite von 50+ auslegen Pins nimmt & lt; 10 ms & gt;
Sie können von hier aus gehen, indem Sie entweder mit der leichten Anleitung, die ich zur Verfügung gestellt habe, noch tiefer in das Thema einsteigen, oder wenn Sie mit dem Codieren anfangen, können Sie sogar Ihre eigene Implementierung der obigen Erklärung vornehmen.
Es wäre zwar viel einfacher, die jQuery-Plugins zu verwenden, aber wenn sie zu Ihrem Fall passen, entscheiden Sie nur darüber.
Zumindest aus dem, was ich weiß, ist das unmöglich. Die CSS-Positionierung funktioniert von links nach rechts und dann von oben nach unten. Sie können also nach links (oder rechts) schweben, aber nicht nach oben.
Am einfachsten ist vielleicht ein Skript, und es sollte nicht kompliziert sein:
-
Ihre Struktur sollte aus Div-Blöcken bestehen, jede 250px breit und so viele wie passt. Ich würde dann möglicherweise in der window.resize-Handler erstellen:
%Vor% -
Ihr ursprüngliches HTML kann alle Ihre Blöcke in den ersten vertikalen Block stellen. Dann können Sie im selben Größenänderungs-Handler die Blöcke nehmen und sie von der ersten in die nächste verschieben. Dies ist im Wesentlichen ein Zweiliner, der sich durch die Elemente schlingt und etwas in etwa so macht:
%Vor%
CSS ist dann etwa so:
%Vor%gute Frage! Ich habe das mehrmals mit verschiedenen Erfolgen versucht, und es ist nicht möglich mit nur CSS. Der einzige Hinweis, den ich Ihnen geben kann, ist: Es ist ein Verpackungsproblem und es gibt jQuery-Skripte dafür!
Sie können dies mit CSS3 tun:
%Vor%Aber es wird derzeit nur von Firefox, Safari und Chrome (neuere Versionen) unterstützt.
Und es wird nicht in der Reihenfolge geschrieben, in der Sie es gemacht haben, es wird 0- & gt; 1- & gt; 2- & gt; 3 in die erste Spalte anstatt über diese setzen.
Mit CSS-Selektoren können die Divis der 2. und 3. Reihe geändert werden, und es ist möglich, ihnen eine neue Position zuzuweisen, aber es ist nicht möglich zu sagen, wie die obige Div-Position war, also werden Sie nicht in der Lage sein, es an der richtigen Stelle zu bewegen, es sei denn, Sie verwenden Javascript.
Betrachten Sie dieses Beispiel:
%Vor%Sie können die Positionen festlegen, aber Sie können nicht sagen, wo Sie sie einstellen sollen, da es keine Möglichkeit gibt, weitere Elementeigenschaften zu erhalten. Also müssen Sie Javascript verwenden.
Tags und Links javascript html css css3 css-float