So erstellen Sie eine schwebende DIV-Liste in Spalten, nicht in Zeilen
Ich habe ein HTML-Layout-Puzzle auf meinen Händen. Ich habe eine große alphabetische Liste, die von meiner PHP-App generiert wird, und ich muss sie auf einer Webseite ausgeben. Das generierte Markup sieht folgendermaßen aus:
%Vor%Das Stylesheet sieht folgendermaßen aus:
%Vor%Gelaufenes Ergebnis:
Wie Sie sehen können, ist dies nicht gut lesbar, ich würde erwarten, dass DIVs in zwei Spalten ausgegeben werden, also würden die ersten Spalten "A B C D" und die zweite Spalte "E F G H" enthalten.
Gibt es eine Möglichkeit, dies zu tun, ohne das Markup zu ändern? Es ist möglich, zu geraden und ungeraden divs unterschiedliche Klassen hinzuzufügen, aber da divs in einer Schleife ausgegeben werden, gibt es keine Möglichkeit, sie anders zu teilen.
Sehen Sie eine Demo: Ссылка
Hinweis: Ich habe es bereits gelöst, indem ich die Liste in zwei Teile durch PHP aufgeteilt habe, aber ich möchte wissen, ob es hier eine HTML / CSS-Lösung gibt.
5 Antworten
Je nachdem, welchen Browser Sie unterstützen müssen, können Sie die neue Eigenschaft CSS3 column-count verwenden.
Markieren Sie mit einer einfachen Liste
%Vor%Verwenden Sie dieses CSS:
%Vor%Hier ist eine Geige - obwohl sie in keiner IE Version bereits unterstützt wird. Um ältere Browser zu unterstützen, gibt es jQuery-Lösungen wie Columnizer jQuery Plugin , die Sie ebenso verwenden können wie oder anstelle der CSS3-Lösung,
Mit Ihrem Markup würde eine CSS3-Lösung wie folgt aussehen:
HTML
%Vor%CSS:
%Vor% Mit dieser Methode erhalten Sie den zusätzlichen Vorteil, dass die Spaltenhöhen gleich sind, unabhängig vom Inhalt jedes inneren <div> .
Wenn es nicht durch alle anbieterspezifischen Präfixe offensichtlich ist, ist die Browser-Unterstützung dafür auf moderne Browser beschränkt (so wie ich es mag), also ist es nicht wirklich produktionsfähiger Code (es sei denn, du magst nervös sein).
Demo: jsfiddle.net/Marcel/tk2tS
Ich kann mir keine reine CSS-Lösung vorstellen.
Du hast gesagt:
Hinweis: Ich habe es bereits gelöst, indem ich geteilt habe die Liste in zwei Teilen von PHP, aber ich möchte wissen, ob es ein HTML / CSS gibt Lösung hier.
Sie haben also die Power von PHP . In diesem Fall würde ich den Code behalten, den Sie bereits haben, aber die Elemente in einer anderen Reihenfolge ausgeben:
Siehe: Ссылка
%Vor%Wie einfach das sein wird, hängt davon ab, wie Ihr PHP strukturiert ist.
Wenn Sie alles in einem Array haben, würden Sie in diesem Fall nur zwei Schleifen haben (eine, die ungerade Array-Elemente ausgibt, die anderen geraden). Wenn Sie Unterstützung für n Spalten benötigen, wäre das auch kein Problem.
Was würde wäre ein Problem, wenn Sie die Ausgabe "on-the-fly" innerhalb der Schleife erstellen. In diesem Fall müssten Sie wahrscheinlich darauf zurückgreifen, die Ausgabe jeder Iteration der Schleife in ein Array zu puffern und anschließend denselben Doppelschleifenprozess durchzuführen.
Sie müssen float nicht für die Elemente verwenden, aber vielleicht für eine Box, in der sich die Elemente befinden, versuchen Sie es mit:
%Vor%Bearbeiten: jetzt mit 2 Spalten:)