如何在图像周围包装文字？

Question

我有一个段落和一个图像（See Example in 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>

<强> codepen example

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

Answer 2

将图片放在顶部

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