文字重叠在图像上

Question

我的图像和段落的结构如下：

<p class="All-Book-Text">Maecenas iaculis, ipsum at tempor placerat, orci ligula aliquam enim, sit amet sagittis turpis enim sit amet lorem. Praesent dapibus pretium felis, et tempus nibh posuere a.</p>


<div class="_idGenObjectLayout-3">
    <div id="_idContainer062" class="ObjExpOpt-Images">
        <img class="_idGenObjectAttribute-1" src="image/animal.png" alt="" />
    </div>
</div>

<p class="All-Book-Text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet elementum ex, a porttitor arcu vulputate vitae. Mauris ac finibus nisi. Etiam at tellus vitae quam pretium eleifend. Donec at dictum nisi, id condimentum dui. Donec in tortor ipsum. Etiam sit amet turpis vulputate, maximus erat in, lacinia leo. Cras placerat lobortis fermentum. Phasellus vulputate libero et pellentesque mattis. Aenean tristique ante egestas nibh aliquet, a sagittis sem aliquam. Aenean sit amet diam elementum, cursus arcu non, vehicula lorem. Sed vitae ante id augue consectetur euismod. Suspendisse ac metus ut tortor mollis semper eget eu mi. Vivamus eleifend leo at felis bibendum rutrum. Proin condimentum consectetur velit, at tristique elit accumsan vel.</p>

当页面呈现时，下段的文本与图像重叠。如何防止这种情况，并确保图像和parapgraph之间的距离为5像素，并且不会发生任何重叠。谢谢！

这是我的问题http://jsfiddle.net/zvnjnxnf/

的现场演示

Answer 1

这里的一切看起来都不错：JsFiddle

p {display: inline}
img {display: block}

Answer 2

首先，您应该删除全书 - 文本和 _idGenObjectLayout-3

的所有样式

然后添加以下css：

._ idGenObjectLayout -3- {

填充：5px;

}