CSS 2 Bilder Nebeneinander - CSS

In diesem Tutorial zeige ich dir, wie du mithilfe von CSS 2 Bilder nebeneinander positionieren kannst. Dies ist eine häufige Anforderung in der Webentwicklung, insbesondere wenn es um die Erstellung von Galerien oder Produktvergleichen geht.

HTML-Grundgerüst

Bevor wir beginnen, müssen wir eine grundlegende HTML-Struktur erstellen, die die beiden Bilder enthält, die wir nebeneinander positionieren möchten.

<div class="container">
   <img src="bild-1.jpg">
   <img src="bild-2.jpg">
</div>

Hier haben wir eine div-Container erstellt, der die beiden Bilder enthält. Beachte, dass wir keinerlei Styling auf den Container oder die Bilder angewendet haben. Wir werden dies später mit CSS tun.

CSS Styling

Als nächstes müssen wir die Bilder mit CSS stylen, damit sie nebeneinander positioniert werden.

.container {
   display: flex;
}

img {
   width: 50%;
}

Hier haben wir den display-Wert des container-Elements auf flex gesetzt, was es uns ermöglicht, die Bilder nebeneinander anzuordnen. Außerdem haben wir die width der Bilder auf 50% gesetzt, um sicherzustellen, dass sie gleich groß sind und gleichmäßig aufgeteilt werden.

Vollständiger Code

Hier ist der vollständige Code, den wir erstellt haben, um die beiden Bilder nebeneinander zu positionieren.

<div class="container">
   <img src="bild-1.jpg">
   <img src="bild-2.jpg">
</div>

<style>
.container {
   display: flex;
}

img {
   width: 50%;
}
</style>

Ergebnis

Das Ergebnis dieses Codes ist eine einfache Ansicht, die beide Bilder gleichmäßig und nebeneinander anzeigt.

Herzlichen Glückwunsch! Du hast nun gelernt, wie man mithilfe von CSS 2 Bilder nebeneinander positionieren kann. Diese Methode wird in der Webentwicklung häufig verwendet, um Galerien oder Produktvergleiche zu erstellen.