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! :)
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.
https://youtube.com/watch?v=hIG-fZ2042k
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
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.
Vielleicht mit float (http://www.html-seminar.de/design_per_css_-_float.htm)...
/* 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>