Question

我想制作 [background img] [text] [background img2]

这是我的代码：

HTML

<table border:0>
   <tr>
        <td><span class="img-left"></span><span class="text-img">My Text is here</span><span class="img-right"></span></td>
        <td><span class="img-left"></span><span class="text-img">My Text2 is here</span><span class="img-right"></span></td>
   </tr>
</table>

CSS

.img-left{
    background: transparent url('left-img.PNG') left center no-repeat;
    width:23px; 
    height:24px; 
    position:relative;
    z-index: 99;
}
.img-right{
    background: transparent url('right-img.PNG') right center no-repeat;
    width:23px; 
    height:24px; 
    position:relative;
    z-index: 99;
}
.text-img{
    margin:0px 0px 0px 0px; 
    padding: 0px 0px 0px 23px;
}

结果： [img1＆amp; 2] [text] 但我想 [img1] [text] [img2]

有人帮忙吗？

Answer 1

只需在td和.text-img元素上添加背景，即可完成此操作。在两个元素上使用'padding-left and padding-right`将推送文本以防止重叠： Demo

在右侧图片上使用right代替left将强制它位于元素的右侧。

在文本之后定位背景图像

1 个答案: