如何讓文字環繞圖像？

Question

假設有 -

CSS -

img { 
    display: inline-block; 
} 

div { 
    display: inline-block; 
    vertical-align: top; 
    height: 150px; 
    width: 150px; 
} 

HTML -

<div> 
<img src="img/koala.jpg" /> 
    wrap the image wrap the image wrap the image wrap the image wrap the image wrap the image wrap the image wrap the image wrap the image wrap the image wrap the image wrap the image wrap the image 
</div> 

我想<div></div>之間的文本將根據被限制大小在 -

div { 
     height: 150px; 
    width: 150px; 
} 

，敷形象之接近，

的東西看起來像 -

這裏jsFiddle我做了這麼遠。

上面的jsFiddle只是寫在圖像的頂部，然後寫下它的下面的文本的其餘部分。

Answer 1

你可以float的圖像，例如

img { 
    float:left; 
} 

jsFiddle here.

你可能想給圖像的ID或類，並使用該選擇器代替（如果你打算用多張圖片在你的頁面上）。

Answer 2

我不確切地知道你想達到什麼目的，你的意思是像this JSFiddle？

如果是這樣，魔術就在於爲您的圖像設置float:left;。