4

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

<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

（注意.上面是空格）

我在哪里犯错误？

提前致谢。

4

4 回答 4

2

请记住，这<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>
于 2012-10-09T07:45:35.940 回答
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>
于 2012-10-09T08:09:13.887 回答
0

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

演示

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

于 2012-10-09T08:38:42.247 回答
0

排队：-

<span>
//content
<img src="images/skin/exception.png" style="float:right">
</span>
于 2012-10-09T09:38:34.250 回答