CSS 3 Spaltenlayout

  • Du kannst mit Flexlayout drei Spalten anlegen und die Bilder dort hinein tun:

  • Hallo,

    super, das ist ja einfacher als ich gedacht hatte!

    Noch eine Frage dazu: wie macht man dieses Spaltendesign am Besten "responsive", damit bei abnehmender Bildschirmbreite die Fotos nicht immer kleiner werden? Bei einem Handdisplay soll dann in der Breite nur mehr eine Spalte gezeigt werden und die anderen beiden Spalten darunter?

    LG

  • Jetzt noch eine letzte Frage:

    Wenn man noch einen Zwischenschritt einlegen möchte: ab 600px 2 Columns nebeneinander (wäre sinnvoll bei einer 4-spaltigen Anzeige) und ab 400px dann 1-spaltig?

  • Das ist dann leider nicht mehr so einfach. Ich habe da mal eine Lösung gebaut mit allen Bildern in einem Container. Die Umschaltung zwischen einer, zwei und drei Spalten geschieht dabei, indem man die Breite der Bilder setzt auf 100%, 50% und 33.33%. Großer Nachteil: Man muss die Höhe des Containers anpassen, damit die Bilder annähernd gleich auf die Spalten verteilt sind. Dadurch ist das Layout schwer zu erweitern und es wäre am besten, wenn man die optimale Höhe mit Javascript berechnen würde.

  • Ich bin jetzt aufgrund deiner Infos zu folgendem Ergebnis gekommen:

    Das funktioniert und springt von 3 Spalten über 2 Spalten auf 1 Spalte beim Reduzieren der Browserbreite um.

    Danke für deine Hilfe!

    LG

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!