Anzeige großes Bild und Text nebeneinander

Question

I ein Problem mit der Ausrichtung auf Fall habe 3: https://codepen.io/anon/pen/BZKYva

Relevant HTML-Code:

<div> 

    <img class="img-valign" src="http://www.placehold.it/550x1050" alt="" /> 
    <span class="text2" style="white-space: pre;">some text3 some text3some text3some text3some text3some text3some text3some text3some text3some text3some text3some text3some text3some text3 some text3some text3some text3some text3some text3some text3some text3some text3some text3some text3some text3some text3</span> 

</div> 

Relevant CSS-Code:

.img-valign { 
    vertical-align: middle; 
    margin-bottom: 0.75em; 
} 

I möchte, dass der Text wie in Fall 1 und Fall 2 auf der Seite des großen Bildes liegt und nicht überläuft. Wie kann ich das tun?

Update (wichtiges Detail): Ich brauche Leerzeichen: pre; auf dem Text, um die Formatierung beizubehalten.

Answer 1

Fügen Sie diese auf Ihrem CSS:

.flex { 
    display:flex 
} 

dann die div geben, die Ihr drittes Bild umgibt/Text Paar class='flex'. Möglicherweise müssen Sie einige andere Attribute anpassen, aber dies sollte Sie auf Ihrem Weg bringen. Suchen Sie nach weiteren Informationen auf Flexbox.

Answer 2

Ändern Sie den Namen des großen Bildes und fügen Sie float hinzu: left to it.

HTML:

<img class="img-valign1" src="http://www.placehold.it/550x1050" alt="" /> 

CSS:

.img-valign1 { 
     float: left; 
    } 

dann können Sie Ihren Text anordnen.