0

假设我有一个跨度，其背景包含图像和 div 中的一些文本，例如：

<div id="myDiv">
    <span style="background: url('path_to_background_image');">My Span</span>
    <span>Some text...</span>
</div>

我希望文本Some text...始终显示在左侧跨度（以图像为背景的跨度）的右中位置。文本是动态的，所以我希望文本始终保持在左侧跨度的右侧（居中在右侧），无论文本增大或缩小。完全没有 JQuery（只是普通的 HTML 和 CSS）有可能实现这样的事情吗？

请告诉我。

谢谢

4

2 回答 2

0

我认为你最好只使用 div，特别是如果你总是希望文本出现在某个位置。例如，如果您希望它们两个一起位于中心并且只希望它占据指定的大小，请执行以下操作：

  <style>
    #wrapper{margin-left: auto: margin-right: auto: width: 700px;}
    #title{float: left; width: 20%};
    #text{float: left; width: 80%};
  </style>


  <div id="wrapper">
    <div id="title">Title</div>
    <div id="text'>...Random amount of Text</div>
  </div>

你可以玩弄边距等以使其完美。

于 2012-11-25T05:29:16.270 回答
0

我同意 Verber 使用 div，不过，我刚刚通过以下代码实现了您正在寻找的效果：

<style>
.with-background {
position:relative;
height:250px;
width:600px;
background:url(bg-image.jpg);
}

.caption {
position:relative;
left:350;
background:pink;
top:50;
width:200px;
height:100px;
}
</style>

..对于标记：

<div class="with-background">
    <div class="caption">
        <p>Some Text</p>
    </div>
</div>

这段代码将一个正方形的文本设置在中心的右侧（使用 left:350），距离上边框 50 像素（使用 top:50）。由于背景图像是 600 像素宽，我将“caption”类的“left”属性设置为 350，只是背景图像宽度的一半多一点。根据您自己的背景图像的大小进行修改，您应该很好。

“背景：粉红色；” 属性就是这样我可以很容易地看到 div 的位置 :)

于 2012-11-25T05:59:22.520 回答