如何使文本换行图像？

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