顯示大的圖像和文本並排

Question

我有對準的問題上殼體3： https://codepen.io/anon/pen/BZKYva

相關的HTML代碼：

<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> 

相關CSS代碼：

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

我希望文本像情況1和情況2一樣位於大圖像的旁邊，並且不會溢出。 我該怎麼做？

更新（重要細節）：我需要空白：pre;在文本上保存格式。

Answer 1

添加到您的CSS：

.flex { 
    display:flex 
} 

然後給包圍你的第三個圖像/文本對class='flex'股利。你可能需要調整一些其他的屬性，但這應該讓你在路上。有關更多信息，請在Flexbox上進行搜索。

Answer 2

更改大圖像的名稱並添加float：left。

HTML：

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

CSS：

.img-valign1 { 
     float: left; 
    } 

，那麼你可以安排你的文字。