javascript - 并排显示大图像和文本

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 一样位于大图像的一侧，并且不会溢出。我该怎么做？

更新(重要细节):我需要 white-space: pre;在文本上保留格式。

Answer 1

将此添加到您的 CSS:

.flex {
    display:flex
}

然后给出围绕您的第三个图像/文本对的 div class='flex'。您可能需要调整一些其他属性，但这应该可以让您顺利进行。如需更多信息，请搜索 Flexbox。