text neben bild in css?

3 Antworten

tavkomann
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, CSS
17.12.2018, 22:12

Dies lässt sich mithilfe von display: inline-block umsetzen. Du benötigst folgendes Markup:

<div>
  <img src="bild.png" alt="Beschreibung" /
  ><p>
    Text
  </p>
</div>

Dann kannst du den Text mit folgendem Style rechts vom Bild positionieren:

.right {
  display: inline-block;
  vertical-align: top;
  width: calc(gesamtbreite - bildbreite - abstand);
  margin-left: abstand;
  position: relative;
  right: 0;
  top: 0;
}

gesamtbreite ist die Gesamtbreite des div-Containers. bildbreite ist die Breite des Bildes, die auch dynamisch sein kann. Falls du einen Abstand zwischen Bild und Text haben möchtest, so musst du diesen ebenfalls angeben.

Live-Beispiel: https://jsfiddle.net/8m127vpq/
medmonk
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer
19.12.2018, 00:20

Markup:

<div class="content">
 <img src="path/to/image.jpg" alt="placeholder">
 <p >Here comes some text!</p>
</div>

CSS:

.content {display: flex;}
.content > img {
 width: 100%; 
 height: auto; 
 max-height: 250px; /* height of the image */
}
Woher ich das weiß:Berufserfahrung
EinAlexander
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, CSS
18.12.2018, 15:06

Dafür gibt es zahlreiche Möglichkeiten. Eine davon:

<!doctype html>
<title>flex box Lösung</title>
<style>
.container { display: flex }
</style>
<div class="container">
   <p><img src="http://placehold.it/50x50" alt=""></p>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

Alex