0

我有以下CSS：

.contents{
    width: 70%;
    float: right;
}

.sidebar{
    width: 25%;
    float: right;
}

div.area {
    position: relative;
    border: 1px solid;
}

span.letter {
    position: absolute;
    font-family: mono;
    font-size: 14;
}

和以下html结构：

<div class="sidebar">

</div>
<div class="content">
    <button id="button">>>></button>
    <div id="area">
        <span class="letter"></span>
        <span class="letter"></span>
        <span class="letter"></span>
        ...
    </div>
</div>

但是，稍后使用 jquery.animate({left: ?px, top: ?px}) 函数定位的字母会显示在侧边栏中。

我应该提到，我最初在他们自己的页面上有按钮和 area-div，我没有遇到问题。

如何在区域 div 中找回字母？

编辑：这是一个 jsfiddle 版本：http: //jsfiddle.net/herrturtur/mPBgg/

4

2 回答 2

1

我想我设法制作了你想要的东西。

布赖恩是对的。这些字母出现在那里是因为您将它们放在 javascript 中的绝对定位中，并且您无法在不弄乱 JS 的情况下修复它。您之前通过 JQuery 的 .offset 绝对定位了该字母，但是完全删除该定位并让它们去往常使用的位置似乎要简单得多，它就在彼此之上position: block，所以这就是我所做的：

CSS：

div#area {   //<--- you had a '.' instead of '#' here. Irrelevant, but I thought I'd mention it
    position: relative;
    border: 1px solid;
}

span.letter {
    display: block;   //<--- added this
    font-family: mono;
    font-size: 14;
}

JS：

/*
 * Draws one letter to the screen at the specified position.
 */
function createLetter(letter){    //removed extraneous parameter
    var letter = $('<span class="letter">' + letter + '</span>');
    $("#area").append(letter);
    //  letter.offset(position);  Commented this out to leave letters where they are
    return letter;
}

由于我删除了方法的position参数，因此createLetter我还更新了在方法中调用它的一行代码createWord。您似乎在传递一个名为position很多的参数，如果您应用我建议的更改，我相信您将能够将其从多种方法中提取出来，以使您的代码更加简洁。

如果您需要它们再次水平移动，您可能只需删除position: blockwith JS 并添加一些填充来调整它。正如我所说，您的问题似乎更适合正常定位，我认为这是要走的路。

您可能还注意到有一个以前没有的额外 J。之前实际上有 2 个 J，只是完美地堆叠在一起，因此您看不到它们，但是对正常文档流的这种更改使第一个 J 重新出现。如果您需要帮助摆脱它，我可以再次查看您的代码，但您可能应该在另一个问题中这样做，因为到目前为止它与您在这个问题中的原始问题相去甚远。:D

于 2012-07-01T02:05:38.097 回答
0

I THINK that the problem is that the CSS for span.letter has a position absolute, which positions it against the whole page, and not the local block.

I modified span.letter to be: 

span.letter {
    font-family: mono;
    display: block;
}

This positioned them in the area block, which is what I think you're looking for.

于 2012-07-01T00:52:34.027 回答