如何防止文字重叠图像？

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索引，如下所示

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