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

Question

我的左边有一张图片，我想将文字排到图片的顶部。

我在 this 中有以下代码jsfiddle:

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

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

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

Answer 1

这是使用 float 的典型案例:

The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it.

只需添加 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>