Html 在CSS中将图像向右移动

我对web开发非常陌生，我有这样的代码：

<style type="text/css">
    span {
        background:red;
        background: transparent url(../images/skin/exception.png) 0.4em 100% no-repeat;
    }
</style>
 <span>
    Contents. 
 </span>

但这让图像消失了！但我想要的是：

内容。我的图片

（注意上面的

是空格）

我在哪里犯了错误

提前感谢。

请记住，

是一个内联元素，它不是用于希望以块方式显示的项目的正确标记。为此，您应该使用

。也就是说，您可以使用

文本缩进：25px

将文本向右移动。或者，您可以使用

left:25px将新的
移动到右侧。请记住，
left
将告诉它您希望将其放置在离左边框多远的位置。然后，您可以将文本放入另一个
：


div{
显示：内联块；
}
部门形象{
背景：红色；
背景：透明url（../images/skin/exception.png）0.4em 100%无重复；
左：25px；
}
目录
如果您不需要将图像设置为背景图像

，您可以应用以下方法：

CSS:

<style>

div#box{
    width: 100%;
}

img#image {
    float: right;
}

</style>

<div id="box">
    <span id="content">
        Contents.
    </span>
    <img src="bkg.jpg" alt="Image not available">
</div>

分区箱{
宽度：100%；
}
img#图像{
浮动：对；
}

HTML:

<style>

div#box{
    width: 100%;
}

img#image {
    float: right;
}

</style>

<div id="box">
    <span id="content">
        Contents.
    </span>
    <img src="bkg.jpg" alt="Image not available">
</div>

目录

我也同意@L0j1k的观点，即span是一个内联级元素。为什么要将某些内容放置在跨度内，然后在该跨度内应用背景图像。无论如何，请检查JSFIDLE链接

演示

内联：-

<span>
//content
<img src="images/skin/exception.png" style="float:right">
</span>

//内容

背景位置：右中@Zeta：我已经编辑了我的问题！
不跨越块。添加
display:block
。我不明白。。。为什么要使用背景图像而不是简单的
图像
？图像不需要在div中-您只需将id添加到
img
标记即可获得相同的效果。是的，我知道。。。我也可以使用span作为内容，而不是
div
，因此我不需要
display:inline
属性。这只是一个例子，让我们知道这是否是一个很好的解决方案（从他的原始代码来看），他希望将背景图像合并到错误的显示中（注意红色和透明的背景色）。