Question

我对网络开发很陌生，我有这样的代码：

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

我得到了输出，但图像被放置在Contents文本上。我尝试过：

 background-position: 25px;

但这会让图像消失！但我要找的是：

Contents . . . . . . . . . . . . . my_image

（请注意，上面的.是空格）

我犯了错误？

提前致谢。

Answer 1

请记住，<span>是一个内联元素，它不是您希望以块方式显示的项目的正确标记。为此，您应该使用<div>。话虽这么说，您可以使用text-indent: 25px;将文字移到右侧。或者，您可以使用<div>将新的left: 25px;移到右侧。请记住left会告诉它你想要放置它的左边界有多远。然后，您可以将文本放在另一个<div>：

中

<style type="text/css">
div {
    display:inline-block;
}
div.image {
    background:red;
    background:transparent url(../images/skin/exception.png) 0.4em 100% no-repeat;
    left:25px;
}
</style>
<div class="box">
  Contents.
  <div class="image"></div> 
</div>

Answer 2

如果您的图片不是background-image，则可以申请：

<强> CSS：

<style>

div#box{
    width: 100%;
}

img#image {
    float: right;
}

</style>

HTML：

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

Answer 3

我也同意@ L0j1k，span是一个内联级元素。为什么要在范围内放置一些内容，然后在该范围内应用背景图像。无论如何请检查jsfiddle链接

<强>样本

http://jsfiddle.net/saorabhkr/BvMyg/

Answer 4

内联： -

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

在CSS中将图像移动到右侧

4 个答案: