Hallo,
ich benötige eure Hilfe bei folgendem Problem. Es soll eine Seite mit Bildern werden, welche in DIV Containern mit fester Breite aber unterschiedlicher Höhe dargestellt werden.
Mit CSS Flexbox bekomme ich es wie im Anhang hin, jedoch sollen die DIVs so wie beispielsweise Instagram angeordnet werden. Also fließend egal welcher Höhe. In meinem Versuch funktioniert es leider nur so, dass die Container in den weiteren Zeilen einen zu großen Abstand zur vorherigen Zeile haben.
http://i.imgur.com/M0uUyAS.jpg
Das rot umrandete ist das gewollte Ergebnis. Bietet CSS Flexbox eine solche Methode oder Javascript? Ich habe bisher nichts finden können.
Mein CSS dazu:
CODE
#container {
width:1000px;
margin: auto;
background:#fff;
display:-webkit-flex;
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
align-items:flex-start;
}
#container > div {
width: 200px;
height: auto;
min-height: 100px;
margin: 10px;
border: 1px solid #CCC;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
#container > div img {
border: none;
}
Danke für eure Hilfe.
PS: Die Anhang-Funktion funktioniert nicht ;-)
ich benötige eure Hilfe bei folgendem Problem. Es soll eine Seite mit Bildern werden, welche in DIV Containern mit fester Breite aber unterschiedlicher Höhe dargestellt werden.
Mit CSS Flexbox bekomme ich es wie im Anhang hin, jedoch sollen die DIVs so wie beispielsweise Instagram angeordnet werden. Also fließend egal welcher Höhe. In meinem Versuch funktioniert es leider nur so, dass die Container in den weiteren Zeilen einen zu großen Abstand zur vorherigen Zeile haben.
http://i.imgur.com/M0uUyAS.jpg
Das rot umrandete ist das gewollte Ergebnis. Bietet CSS Flexbox eine solche Methode oder Javascript? Ich habe bisher nichts finden können.
Mein CSS dazu:
CODE
#container {
width:1000px;
margin: auto;
background:#fff;
display:-webkit-flex;
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
align-items:flex-start;
}
#container > div {
width: 200px;
height: auto;
min-height: 100px;
margin: 10px;
border: 1px solid #CCC;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
#container > div img {
border: none;
}
Danke für eure Hilfe.
PS: Die Anhang-Funktion funktioniert nicht ;-)