Frage von Themostwanted, 40

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

Ich möchte gern auf meiner Webseite (Schulaufgabe - die Lehrerin hat natürlich mal wieder alles genau erklärt) einige Bilder horizontal über die Breite des Feldes verteilen. Das aber nicht mit absoluten Werten sondern automatisch da wir auch responsive Design anwenden sollen - wenigstens ein klein wenig zumindest.

Nun schaffe ich es aber maximal die Abstände zwischen den Bildern mit margin einzustellen, dass diese sich automatisch verteilen funktioniert nicht wirklich, auch nicht mit auto.

Hier der Code der bisherigen Klasse für die Bilder:

.BildStartseite{
    width:150px;
    margin-left:2%;
    margin-right:2%;
}

vielleicht könnt ihr mir da ja helfen. Danke im voraus! :)

Expertenantwort
von medmonk, Community-Experte für Computer, 23

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
von mrhashpipeotto, 26
/* 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
von Steffile, 19

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
von AnonYmus19941, 21

Vielleicht mit float (http://www.html-seminar.de/design\_per\_css\_-\_float.htm)...


Keine passende Antwort gefunden?

Fragen Sie die Community