如何在圖像周圍包裝文字？

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