Dynamisches Float-Layout mit CSS

8

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!

    
jamietelin 08.05.2012, 10:07
quelle

9 Antworten

6

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.

    
Peter 08.05.2012, 10:49
quelle
4

Ich bin mir nicht sicher, aber ich denke, dass man so etwas mit dem "flexbox-Layout" bekommen kann Ссылка

Das Problem ist, dass es etwas ziemlich Neues ist und Sie möglicherweise breitere Unterstützung brauchen.

    
Cmorales 08.05.2012 10:18
quelle
4

Haben Sie versucht Ссылка ? Es basiert auf jQuery

    
rt2800 08.05.2012 10:18
quelle
3

Sie haben das nicht mit reinem CSS erreicht, Sie müssen dieses JS verwenden Ссылка

    
sandeep 08.05.2012 10:16
quelle
2

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:

  1. 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%
  2. 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%     
zmilojko 08.05.2012 10:18
quelle
1

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!

    
Hans Wassink 08.05.2012 10:11
quelle
1

Versuchen Sie es und es kann Ihnen helfen

HTML

%Vor%

CSS

%Vor%

Und so weiter ... In diesem kannst du das tun, aber es ist nicht der richtige Weg. Oder Sie müssen Javascript dafür verwenden. Zuvor haben andere dir schon einen Link gegeben

    
Jhilom 08.05.2012 10:37
quelle
1

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.

    
Ozzy 08.05.2012 10:51
quelle
0
%Vor%

dein Innver div

%Vor%

HTML-Code:

%Vor%

Versuche das, es wird dir helfen!

    
khurram 10.05.2012 14:51
quelle

Tags und Links