2

我是 html、css 和 javascript 的新手。我想做的是：

在图像的右侧添加带有一些文本的白色背景。我已将白色 bg div 和文本定位为绝对。

到目前为止，我做得对，但是当我通过 jquery 函数更改文本时，它会将文本 div 移动到其正常位置（如果我不使其成为绝对位置，则应该是这样）。

这是我的代码：

HTML：

    <div id="block_contact" class="block_contact">  
    <img id="notesImg" src="images/love_notes/1.jpg" onload=""/> 
    <div id="white_bg_right">
    </div>
    <div id="notes_text_div">
    <p id="notes_text">What a pleasant surprise!</p>
    </div>

CSS：

    #white_bg_right {
    width:240px;
    height:362px;
    background-color:#ffffff;
    opacity:0.5;

    position:absolute;
    top:16px;
    left:329px;

    }

    #notes_text_div {
    width:210px;
    height:362px;
    position:absolute;
    left:344px;

    }
    #notes_text{
    width:210px;
    height:362px;

    display:table-cell;
    vertical-align: middle;
    }

jQuery函数：

$("#notes_text").html("<p>dummy text</p>");

任何形式的帮助将不胜感激！

4

2 回答 2

0

我将从这个开始：

#block_contact { position: relative; }

任何绝对定位的子元素都将从#block_contact的左上角开始，而不是从窗口的左上角开始。

尝试一下，看看它是否可以解决任何问题，我没有任何其他想法。

于 2013-06-26T19:39:10.507 回答
0

如果您只想更改文本，则不需要<p>jQuery 函数调用中的标签：

$("#notes_text").html("dummy text");

如果您出于某种原因想要这些标签，那么您将需要一些 CSS 来设置display:table-cell，就像您使用#notes_text. 默认情况下，<p>标签使用display:block.

于 2013-06-26T20:50:56.050 回答