Julian: Bildergalerie mit CSS

Beitrag lesen

Hallo allesamt,

Ich möchte eine kleine Bildergalerie mittels CSS umsetzen.

Die Anforderungen:

  • eine bestimmte Anzahl an Bildern soll angezeigt werden (im Stil einer Matrix)
  • wenn das Browserfenster kleiner gezogen wird soll sich die Matrix anpassen, d.h. die Bilder rutschen untereinander. Die Matrix wird schmäler und länger.

Mein bisheriger Code:

  
    <div style="border-style: solid; width: 350px; height: auto;">  
      <div style="width: 100px; background-color: silver; border-style: dashed; border-width: 1px; float: left;">  
          Platzhalter  
      </div>  
      <div style="width: 100px; background-color: silver; border-style: dashed; border-width: 1px; float: left;">  
          Platzhalter  
      </div>  
      <div style="width: 100px; background-color: silver; border-style: dashed; border-width: 1px; float: left;">  
          Platzhalter  
      </div>  
      <div style="width: 100px; background-color: silver; border-style: dashed; border-width: 1px; float: left;">  
          Platzhalter  
      </div>  
    </div>  

Soweit so schlecht: Die "Bilder-Divs" liegen rein visuell nicht mehr in der umrahmenden Div.

Ist-Zustand:

Soll-Zustand:

Was muss ich tun? (Ich hätte gerne die SuFu benutzt, wusste aber keine passenden Suchbegriff)

mfg Julian