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

Question

我左边有一个图像，我想将文本排成图像的顶部。

我在this jsfiddle：

中有以下代码

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

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

如何从顶部围绕图像流动文本？

Answer 1

这是使用float的典型案例：

  

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

只需将float: left;添加到<img>元素，文字就会从图片顶部开始。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>