0

我有一个 10 像素厚边框的 div。在 div 里面有一张图片和一些文字。 图片在边框上略微移动（必须，应该在边框上方）。

<style>
#main
{
    border:10px solid red;
    width:400px;
}
.img-to-border
{
    margin-left:-10px;
    margin-top:-10px;
    position:relative;
    float:left;
}
.text{
    border:1px solid blue;
    text-align:right;
    padding-right:30px;
}
</style>

    <div id="main">
        <img src="https://www.google.by/logos/2012/slalom_canoe-2012-sr.png" alt="" class="img-to-border">
        <p class="text">DCBA padding-right of text is always 30px </p>
    </div>

这是一个工作代码： jsFiddle 问题是如果文本长一到四个符号，它就会掉下来。但是，我希望它高于图像（上面我的意思是 z 索引，而不是从屏幕的上侧到屏幕的下侧）。PS padding-right 总是 30px。因此，它与您在计算器上键入数字的方式完全相同 - 从右到左并在图像上方，在一行中。我的例子该怎么做？

再次抱歉，我重复一遍，图片在边框上略微移动（必须，应该在边框上方）。

4

2 回答 2

1

我无法正确解决您的问题。我尝试了 1 到很多字母，文本总是放在同一行，所以它是图像。如果您对图像本身有任何问题，您可以继续

#main {position: relative;} /* Keep it just the same */

img {
   position: absolute;
   top: -10px; left: -10px;
}

该图像不会在页面上占据任何位置，但仍然可见并且文本框没有颠簸。

这是一个工作小提琴：http: //jsfiddle.net/BDFJM/

对不起，如果我把你的问题弄错了。

于 2012-08-09T15:15:24.047 回答
1

您可以制作#main position:relative图像position:absolute，以便文本覆盖它。在这里查看更新的jsfiddle http://jsfiddle.net/85Zk5/2/ （其实这种方式不需要float .img-to-border，可以从jsfiddle中去掉应该是一样的）

于 2012-08-09T15:13:56.313 回答