CSS div container neben img in der selben Zeile?
Ich wollte ein Bild neben einem Div-container in der obersten Zeile platzieren, habe jedoch keinen Weg gefunden, kann mir jmd helfen? Danke! :^)
1 Antwort
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Programmieren & Softwareentwicklung
Während du wahrscheinlich bei vielen Tutorials noch eine Lösung mit `float: left` und dergleichen siehst, kann man inzwischen ganz einfach flex oder grid dafür verwenden.
Dazu packst du einfach die beiden Elemente in einen gemeinsamen Container und legst dann das Layout dieses Containers als flex fest. Zum Beispiel so:
<div class="outer">
<img src="https://picsum.photos/200/300">
<div class="inner">
Content
</div>
</div>
CSS:
.outer {
display: flex;
}
Hier als JSFiddle mit Resultat: https://jsfiddle.net/timlg07/qfswaezo/6/
Mit flex-base bei den Kindelementen und mit object-fit für das Bild kannst du das Layout dann noch an deine Bedürfnisse anpassen.
Woher ich das weiß:Berufserfahrung