如何防止文本与图像重叠？

Question

文字与图像重叠。
这是重叠内容的屏幕截图：
CSS类文本：

._text
{
    position:relative;
    float:left;
    text-align:left;
    margin-left:30px;
    font-size:14px;
    color:#FF0000;
    z-index:1;
}

CSS图像类：

._images
{
    position:absolute;
    float:right;
    margin-top:18px;
    margin-left:165px;
    width:170px;
    height:170px;
    z-index:0;
}

给我一​​些解决方案，将文字从图像中移开。
提前谢谢你。

的版
这是由ajax动态返回的HTML（在评论中要求）：

<div id="rNo">(12 / 14)</div>
    <img class="_images" src="Buildings_files/school2.png" align="right">
    <h4 class="building_heading">School</h4>
    <span id="m_text_area_body">School is .... <br><br></span>
    <span class="_text">» Upgrade Governor Palace to (level-10) to construct this building. You have suffecient golds to construct it</span>
</div>

Answer 1

像这样添加填充

 ._text{padding-right: 170px;}

或者像这样设置文字的宽度

._text{width: /*distance between left of text and image*/;}

您还可以尝试同时为文本和图像提供相同的z-index

 ._text{z-index:1;}  ._images{z-index:1;}