div弹出对齐

Question

我在我网站的右侧边栏中使用“自制”php 日历。该网站的正文是固定的 1000 像素。当日历上安排了活动的一天悬停在上面时，会显示一个 div，其中提供有关该活动的详细信息。这是一个视觉表示：

这里的问题是事件框通常超出了body的边界。在较小的显示器上，该框超出屏幕右侧，无法读取。我试着让它落在左边而不是右边，但这覆盖了主要文本区域并且看起来很奇怪。有什么办法可以让盒子向右下，但如果需要（在较小的屏幕上查看），被推到左边？我猜类似于浮点数。

谢谢。

编辑：抱歉，我忘了说我是如何让这些框出现的。它完全由 CSS 驱动。包含元素是相对定位的，而盒子是绝对定位的。它们保持在页面外（左：-9999px；）并在日历单元格悬停时显示。这个过程似乎更快捷。因此，定位元素来避免这个问题是不可能的。

我不希望框位于单元格的左侧。我希望它位于右侧除非由于访问者的屏幕尺寸而需要。

Answer 1

对于 Javascript：

1. 检查文档的大小（找到最右边的像素）..
2. 检查方框最右边的像素
3. 从 document.right 中减去 box.right 并将 box 向左移动该数量

对于 CSS：

使框的位置为绝对和right: -10;

Answer 2

这更像是一个 CSS / Javascript 问题。

第一种方式：赋值{position:absolute; right:0} 到弹出 div 和 {position:relative} 到包含 div，所以它会一直浮动到左边。

第二种方式：使用javascript/jQuery计算popup div的右边缘位置，如果div要戳出边缘，则修改左。