Vertikale Bildergalerie mit Spaltenzahl abhängig von Fensterbreite

[metno]

Hallo Forum,

Ich möchte gerne mit CSS eine Bildergalerie erstellen, in der die Thumbnails (alle gleiche Breite aber variable Höhe) in Spalten angeordnet sind. Die Anzahl Spalten soll sich aber dynamisch der Fensterbreite anpassen, d.h. ein kleines Fenster zeigt nur z.B. 2 Spalten und beim Vergrössern verteilen sich die Thumbnails auf n-Spalten. Im Idealfall so, dass jede Spalte etwa gleich hoch ist.

Ein Beispiel von der Galerie ist hier (natürlich ohne dynamische Spaltenanpassung): http://www.sarah-urech.ch/Test3/

Ist sowas irgendwie machbar? Leider fehlt mir der Ansatz. JS wäre zur Not auch möglich.

Besten Dank!

Lg metno

 

[tombe]

Bei gleicher Spaltenbreite sollte sich doch die Anzahl der Spalten automatisch ergeben.

Spaltenbreite: 200 Pixel
Bildschirmbreite: 1024 Pixel
Anzahl der Spalten: 5

Spaltenbreite: 200 Pixel
Bildschirmbreite: 1680 Pixel
Anzahl der Spalten 8

Das was in der Breite nicht in die gleiche "Zeile" passt, wird doch automatisch umgebrochen!?

 

[metno]

Hallo Tombe,

Leider gibt es keine "Zeilen", was genau mein Problem ist. Da die Thumbnails stets eine unterschiedliche Höhe haben (s. Link im vorherigen Post), gibt es kein gitterartiges Layout und deshalb auch keinen horizontale "gemeinsamen Nenner".

Grüsse metno

 

[hela]

Hallo,
versuch es doch mal mit einem CSS3-Spaltenlayout:

• Übersicht: CSS-Spaltenlayouts: Die zukünftigen Möglichkeiten
• CSS-3-Spaltenlayouts: Flexibler Textumbruch mit dem Multi-Column-Layout-Modul
• MSDN: Mehrspaltiges Layout
• Multi-Column-Generator

 

[metno]

Hallo hela,

Das ist genial! Genau das was ich brauche. Für Interessierte:

1. Ein (1) Div erstellen und in diesem Div alle Bilder einfügen (Achtung: keine Block-Elemente in diesem Div, höchstens inline-block)
2. Das div mit der CSS3 Eigenschaft "column-with" auf die gewünschte Breite formatieren
3. Fertig

Dabei beachten, dass das Parent-Div keine fixe Breite haben darf. Dann passt sich die Spaltenanzahl immer der Breite des Parent-Divs an.

Besten Dank!

Gruss metno

 

[Jan-Frederik Stieler]

Hi,
mal eine kurze Frage, hat sich das W3C jetzt endlich auf ein Spaltenmodell für CSS3 geeinigt oder gibt es immer noch diese drei unterschiedlichen Verfahren?

Viele Grüße