在浮法相对定位元素左格

我有以下的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}）函数显示在边栏中。

我应该提到，我最初在他们自己的页面上有按钮和区域div，问题没有出现在我的页面中。

如何获取区域div中的字母？

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

来源

2012-07-01 lowerkey

如果我们能看到一个工作版本，这将有所帮助。 –

你的意思是他们在动画完成后在侧栏*结束？ – Utkanos

JSfiddle.net的工作副本将是最有帮助的:) – jaypeagi

我觉得现在的问题是，span.letter的CSS具有绝对的位置，其定位是针对整个页面，而不是局部块。

我修改span.letter是：

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

这种定位他们在该地区的块，这是我认为你要寻找的。

来源

2012-07-01 00:52:34

不幸的是，那也没有做到。他们仍然处于变革之前的相同位置。 – lowerkey

你是对的Brian，只有一些JS代码也搞乱了完整代码的位置（参见OP的小提琴）。我在答案中扩展了您的解决方案。：D –

I think I managed to produce something like what you wanted.

布赖恩是对的。这些字母出现在那里是因为你把它们放在了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: block与JS，也许增加一些填充调整它。正如我所说，你的问题似乎更适合正常的定位，我认为这是一条路。

你也可能已经注意到，还有一个额外的J不在之前。之前实际上有2个J，它们完全堆叠在一起，所以你看起来不像它们，但是对正常文档流程的这种改变使得第一个J重新出现。如果您需要帮助摆脱它，我可以看看你的代码了，但你或许应该这样做的另外一个问题，因为它至今从原来的问题在这一个题外话。：D

来源

2012-07-01 02:05:38

你在这个答案中做了很多工作。不错的工作！ –

在浮法相对定位元素左格

回答

相关问题