nicht angemeldet
Seitenfüllendes Grid mit Umbruch - Möglich?
StruppiHallo.
Für eine Seite die Suchergebnisse darstellen soll, würde ich gern ein gewisses Layout realisieren. Nach einigen versuchen weiss ich jedoch nicht ob es überhaupt möglich ist.
Es sollen Elemente in einem Gitter(Grid) angeordnet werden. Dieses soll in der Breite die gesamte Seite füllen. Wenn die Seite zu klein wird, sollen Elemente umgebrochen werden, jedoch trotzdem die gesamte Seite genutzt werden.
Beispiel: Der Browser-Sichtbereich ist 400px breit. Es werden 4 Elemente mit jeweils 100px Breite dargestellt. Nun wird das Fenster kleiner gezogen auf 320px. Somit haben alle Elemente eine breite von 80px. Dies soll nun die minimale Breite der Elemente sein. Wird das Fenster noch etwas kleiner gezogen(390px), soll eines der 4 Elemente umgebrochen werden in die nächste Zeile. Da nun wieder Platz freigeworden ist, werden die verbleibenden 3 Elemente jeweils 130px breit.
Ich hoffe es ist verständlich was ich meine. Ein ähnliches Verhalten hat die Google Bildersuche. Jedoch werden hier nur die Abstände vergrößert oder verkleinert, bei mir sollen es die Elemente selbst sein.
Die Lösung sollte am besten ohne JS möglich sein.
Vielen Dank für jegliche Anregungen.
-
Es hat sich der Fehlerteufel eingeschlichen.
»»noch etwas kleiner gezogen(390px)
Das sollten 315px sein.»»3 Elemente jeweils 130px breit.
Hier sollten es dann 105px sein. -
Es sollen Elemente in einem Gitter(Grid) angeordnet werden. Dieses soll in der Breite die gesamte Seite füllen. Wenn die Seite zu klein wird, sollen Elemente umgebrochen werden, jedoch trotzdem die gesamte Seite genutzt werden.
Bei einem Gitter würde ich mir Gedanken über eine Tabelle machen, auch wenn es keine "tabellarischen Daten" sind, eine Tabelle ist aber ein Gitter.
Beispiel: Der Browser-Sichtbereich ist 400px breit. Es werden 4 Elemente mit jeweils 100px Breite dargestellt. Nun wird das Fenster kleiner gezogen auf 320px. Somit haben alle Elemente eine breite von 80px. Dies soll nun die minimale Breite der Elemente sein. Wird das Fenster noch etwas kleiner gezogen(390px), soll eines der 4 Elemente umgebrochen werden in die nächste Zeile. Da nun wieder Platz freigeworden ist, werden die verbleibenden 3 Elemente jeweils 130px breit.
Elemente:
float:elft;
width:25%;Container:
min-width:390pxStruppi.
-
float:elft;
Elft? :p
width:25%;
Damit werdens aber immer 4 Elemente sein - auch hier gehört ein min-widht rein.
Wenns dann aber nur 3 sind, nehmen sie den vollen Platz nicht mehr ein.
-
Wenns dann aber nur 3 sind, nehmen sie den vollen Platz nicht mehr ein.
Genau das ist das Problem.
Die Methode habe ich nämmlich auch schon versucht.
Nur bekomme ich es nicht hin, dass die verbleibenden Elemente sich den restlichen platz teilen.-
Nur bekomme ich es nicht hin, dass die verbleibenden Elemente sich den restlichen platz teilen.
Wie ich sagte: da musst du mit JavaScript nachhelfen.
-
-
float:elft;
Elft? :p
upps, stimmt es muss zwölft heißen ;-)
width:25%;
Damit werdens aber immer 4 Elemente sein - auch hier gehört ein min-widht rein.
ok, ist logisch.
Struppi.
-
auch hier gehört ein min-widht rein.
ok, ist logisch.
Hätte ich jetzt nicht gesagt, eigentlich hätte ich ein "Nein!!!!111Elft, das muss min-width heissen" erwartet.
-
-
-
-
Die Lösung sollte am besten ohne JS möglich sein.
"Geht nicht".
Mit CSS und JavaScript ist das aber möglich.
Mittels float oder inline-block erzeugst du dein Raster mit automatischen Umbrüchen. Damit die Elemente jeweils die restbreite auffüllen und dynamischen wachsen oder schrumpfen musst du mit ein bisschen JavaScript nachhelfen und das resize-Event überwachen.