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
}

然后给出围绕第三个图像/文本对class='flex'的div。您可能需要调整其他一些属性，但这样可以让您继续前进。有关详细信息，请在Flexbox上进行搜索。

Answer 2

更改大图片的名称，并将float：left添加到其中。

HTML：

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

CSS：

    .img-valign1 {
        float: left;
    }

然后你可以安排你的文字。

并排显示大图像和文字

2 个答案: