Make Inline-Block 100% Höhe der Eltern?

Ich habe ein Wrapper div mit einem Bild und etwas Text. Ich möchte, dass der Text, der word-wrap: break-word hat, immer rechts vom Bild beginnt, auch wenn es mehrere Zeilen lang ist. Im Moment wird der Text umgebrochen und die nächste Zeile unter dem Bild gestartet.Make Inline-Block 100% Höhe der Eltern?

Ich habe versucht, das Bild in einem div zu verpacken und die Höhe des div auf 100% zu setzen, um eine Art Spalte zu erzeugen, aber das scheint nicht zu funktionieren.

machte ich einen JSfiddle zu zeigen, was los ist: http://jsfiddle.net/dsh0hnc9/2/

Kann mir der Text immer jemanden helfen, auf der rechten Seite des Bildes zu starten, auch wenn es mehrere Zeilen lang ist?

Quelle

2016-08-13 Bender

Text rechts des Bildes beginnt – chirag

I Kommentierung Display versucht: Inline-flex; in Ihrer imgdiv-ID, dann lassen Sie es nach links schweben und geben Sie Höhe wie 200px (gleich dem Text p), es hat funktioniert – Shrikant

#outerDiv { 
 
    border: 1px solid red; 
 
    display: flex; 
 
    align-items: center; 
 
    padding: 10px; 
 
} 
 
#imgDiv { 
 
    height: 100%; 
 
    margin-right: 10px; 
 
} 
 
p { 
 
    color: black; 
 
    display: inline-block; 
 
    word-wrap: break-word; 
 
    margin: 0; 
 
}

<div id="outerDiv"> 
 
    <div id="imgDiv"> 
 
    <img src='http://beerhold.it/10/10'> 
 
    </div> 
 
    <p> 
 
    me: Yea there's kids who use this, don't say super inappropriate stuff please or you'll be banned. I saw a guy get banned last week. boy was he pissed. 
 
    </p> 
 
</div>

Quelle

2016-08-13 05:45:32

Make Inline-Block 100% Höhe der Eltern?

Antwort

Verwandte Themen