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

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>

Answer 2

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

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>

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

How do I align text with the top of the image?

html

css

css-float

text-alignment