找到内容的位置而不是元素

Question

我有一篇元素文章，展示了所有不同类型的样式。

当您将鼠标悬停在每个元素上时，会出现一个可由用户操作的按钮。 这很好用，直到我添加浮动图像。

由于浮点数的工作方式，原始元素仍然到达包装器的边缘，但内容在浮动图像之后开始。

我需要找到一种方法来获取元素内容的位置而不是实际的元素本身。

快速拍摄我正在谈论的内容。

---

---

修改：添加代码示例 - http://jsfiddle.net/h5P2e/1/embedded/result/

此代码示例没有本地的一些清理功能，因此绿色按钮有时会显示在内部内联元素中。我关心的是图像顶部的绿色按钮，它应该在段落内容附近。

Answer 1

您可以选择将overflow:auto添加到内容区域中的p和ul标记。这将启动一个新的block formatting context，但它也不是没有缺点。如果您的子元素具有太多边距或使用定位，则存在滚动条出现的风险，并且浮动也不会完全相同。此方法的结果是元素的边缘移动到图像覆盖的区域之外。

Demo和source