Mehrere Bilder mit Abstand nebeneinander
Folgendes Problem: Ich möchte mehrere Bilder nebeneinander darstellen, und zwar mit Abstand, aber nicht am Anfang und am Ende. Da das Ganze mit verschiedenen Bildschirmgrößen funktionieren soll, weiß ich natürlich nicht, wie viel Bilder nebeneinander passen, ansonsten könnte ich immer das letzte Bild in einer Zeile ohne margin-right darstellen.
Der hier verwendete Code
<html lang="de" data-lt-installed="true" class=" dmrdmahx idc0_331"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-wrap: wrap;
width: 100vw;
height: 100vh;
align-content: space-around;
justify-content: space-around;
}
.banner {
/* flex: 1; */
display: flex;
min-width: 100px;
width: auto;
margin: 10px;
max-width: 234px;
font: normal normal 16px/22px Arial;
text-decoration: none;
}
.sponsor {
width: 100%;
border: 1px solid hsl(0deg 0% 0%);
}
</style>
</head>
<body>
<a class="banner" href="#" target="_blank">
<img class="sponsor" src="image/zaehler.gif" alt="Link zu YogiZähler2">
</a>
<a class="banner" href="#" target="_blank">
<img class="sponsor" src="image/zaehler.gif" alt="Link zu YogiZähler2">
</a>
<a class="banner" href="#" target="_blank">
<img class="sponsor" src="image/zaehler.gif" alt="Link zu YogiZähler2">
</a>
<a class="banner" href="#" target="_blank">
<img class="sponsor" src="image/zaehler.gif" alt="Link zu YogiZähler2">
</a>
<a class="banner" href="#" target="_blank">
<img class="sponsor" src="image/zaehler.gif" alt="Link zu YogiZähler2">
</a>
<a class="banner" href="#" target="_blank">
<img class="sponsor" src="image/zaehler.gif" alt="Link zu YogiZähler2">
</a>
<a class="banner" href="#" target="_blank">
<img class="sponsor" src="image/zaehler.gif" alt="Link zu YogiZähler2">
</a>
<a class="banner" href="#" target="_blank">
<img class="sponsor" src="image/zaehler.gif" alt="Link zu YogiZähler2">
</a>
<a class="banner" href="#" target="_blank">
<img class="sponsor" src="image/zaehler.gif" alt="Link zu YogiZähler2">
</a>
<a class="banner" href="#" target="_blank">
<img class="sponsor" src="image/zaehler.gif" alt="Link zu YogiZähler2">
</a>
</body></html>