如何将文本与图像顶部对齐？

Question

我在左侧有一张图片，我想将文字排在图片顶部。

我在this jsfiddle 中有以下代码：

<div>
   <img src... >
   <span>hello  hello hello hello hello hello...</span> 
</div>

但它会将文本沿图像底部对齐，如下所示：

如何让文字从顶部围绕图像排列？

Answer 1

这是使用float的典型案例：

float CSS 属性指定元素应放置在其容器的左侧或右侧，允许文本和内联元素环绕它。

只需将float: left; 添加到您的<img> 元素，文本将从图像顶部开始。

img {
  float: left;
  margin-right: 1em;
}

<div>
  <img src="http://placehold.it/100x100/E8117F/000.png">
  <span style="vertical-align:text-top">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</span>
</div>

Answer 2

将以下 css 添加到您的小提琴中，使文本与图像顶部对齐。这是你想要的？如果不是，请添加更多详细信息，我可以编辑我的答案。

img {
  float: left;
}

img {
  float: left;
}

<div>
  <img src="http://placehold.it/100x100/E8117F/000.png">
  <span style="vertical-align:text-top">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</span>
</div>

Answer 3

浮动图像会很有用： https://css-tricks.com/all-about-floats/

.media img {
    float: left;
    margin: 0 1em 1em 0;
 }

<div class="media">
    <img src="http://placehold.it/100x100/E8117F/000.png">
    <span>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</span>
<span>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</span>
</div>