Wie kann ich Bilder in HTML bzw. CSS horizontal automatisch verteilen?

...komplette Frage anzeigen

4 Antworten

Schau dir folgendes Video in Ruhe an und Übertrag die gezeigten Techniken auf deine gestellte Aufgabe. Vorausgesetzt es geht dir lediglich um die vertikale und/oder horizontale Zentrierung.   

Wenn dem nicht so ist, solltest du dich mit CSS Box und Flex-Modell vertraut machen. Flex wäre der zeitgemäße Weg. Hat jedoch den Nachteil, das ältere Browsers dies gar nicht oder nur teilweise unterstützen. Die passenden Begriffe dir ja bereits genannt. Dir viel Erfolg bei der Umsetzung wünsche.

LG medmonk 

Antwort bewerten Vielen Dank für Deine Bewertung

In diesem Fall wuerde ich mit multiple columns arbeiten. (Masonry benutzt auch dieses Prinzip):

HTML:

<div class="bilder-container"><img ...><img...><img...>...</div>

CSS:

.bilder-container {
    -webkit-column-count: 6; /* Chrome, Safari, Opera */
    -moz-column-count: 6; /* Firefox */
    column-count: 6;
}

Mit @media  queries kannst du an bestimmten breakpoints den column count auf eine niedrigere Zahl runtersetzen.

Antwort bewerten Vielen Dank für Deine Bewertung
/* Float sucks, Flexbox rules */
.images {
display: flex;
justify-content: center;
flex-wrap: wrap;
}

<div class"images">
<img src="foo.jpg">
<img src="bar.jpg">
...
</div>
Antwort bewerten Vielen Dank für Deine Bewertung

Was möchtest Du wissen?