如何用文本包装图片（当前在背景中）

Question

我有一张我设置为背景图片的图片，我想不允许文本覆盖图片。 除此之外，在图片下方，文本必须采用全宽，整个文本在同一段中！

该网站适用于移动设备，因此我认为弹性盒不是所有设备的正确选择！

图片尺寸为64 * 64，不能是其他尺寸！

http://jsfiddle.net/RF8b7/或者这是我当前的代码

<div id="mydiv" class="myclass">
        <h2>Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    </div>

#mydiv{
background: transparent url(../contents/Picture.png) no-repeat 10px 0;
background-size: 64px 64px;}

我该怎么办？

提前致谢

Answer 1

选项1

您可以使用img代码visibility: hidden和float:left将其他图片添加到文档中，它的工作方式也相同。 Demo

选项2

如果您将图片与文字分开放置，则可以使用float: left;，文字会围绕它。 Demo

<强> HTML

<img src="http://i.telegraph.co.uk/multimedia/archive/01854/readers-moon-1_1854200j.jpg">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<强> CSS

img{
  float: left;
}

<强>解释
将图像设置为包含div文本的背景图像通常是个坏主意（除非您希望将其作为背景）。将图像和div分隔成单独的容器可以让您更好地控制定位。

Answer 2

这是我能想到的最简单的方法：

<强> FIDDLE

HTML：

<div id="mydiv" class="myclass">
    <img src="http://i.telegraph.co.uk/multimedia/archive/01854/readers-moon-1_1854200j.jpg"/>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        </div>

CSS：

img{
    float:left;
}