如何在图像周围换行？

Question

我有一个段落和一个图像（ 请参见CodePen中的示例 ）：

<div>
  <p>
    Lorem ipsum dolor sit amet ...
    <img src="http://placehold.it/200x200"/>
  </p>
</div>

以及以下CSS：

div {
  margin: 0 auto;
  width: 60%;
}
img {
  float: right;
  padding: 20px;
}

我如何将他的文字环绕图像？

我尝试了float:right但这似乎不起作用。

Answer 1

将图像放在文本之前：

<div><img src="http://placehold.it/200x200"/>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec eros enim. Donec et scelerisque nisl, nec luctus massa. Nullam ut laoreet sem. Sed ligula elit, auctor et sagittis facilisis, auctor in nulla. Nulla suscipit dignissim feugiat. Vivamus lacinia tellus elit, non bibendum purus tempus eget. Sed porttitor accumsan lacus, at aliquam nisi rutrum nec. Donec a dignissim tortor. Curabitur blandit non turpis tristique tincidunt. Sed dictum sem id sem lacinia mattis. Quisque pellentesque, sem sit amet auctor congue, enim lorem egestas nisi, sit amet accumsan turpis turpis et metus. Mauris pulvinar luctus felis, in feugiat dui vulputate ac. Sed faucibus libero nulla, placerat accumsan elit rutrum et. Maecenas id enim quis turpis pretium sollicitudin.
  </p>
</div>

代码笔示例

您在图像上正确使用了float，但是由于在您的原始示例中图像在文本之后，因此您不会注意到效果。 通过将图像移到文本之前，它会向右浮动，然后允许其后的文本在其旁边浮动。

Answer 2

将图像放在顶部

 <img src="http://placehold.it/200x200"/>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec eros enim...