Div弹出对齐

Question

我在我的网站右侧边栏中使用了“自制”的php日历。该网站的主体是固定的1000px。当计划事件的日历上的某一天悬停时，将显示一个div，其中提供有关该事件的详细信息。这是一个直观的表示：

这里的问题是事件框通常超出了身体的边界。在较小的显示器上，盒子伸出屏幕右侧，无法读取。我试着把它倒在左边而不是右边，但是它覆盖了主要文本区域并且看起来很奇怪。有什么我可以做的让盒子落到右边，但如果需要（在较小的屏幕上观看），可以向左推？与浮动类似，我想。

感谢。

编辑：抱歉，我忘了提到我正在制作这些框的方式。它完全由CSS驱动。容纳元件相对定位，盒子绝对定位。它们保持在页面外（左：-9999px;）并显示在日历单元格悬停时。这个过程似乎更加快捷。因此，无法定位元素以避免此问题。

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

Answer 1

这是一个CSS / Javascript问题。

第一种方式：分配{position：absolute;右：0}到弹出div，{position：relative}到包含div，所以它一直浮动到左边。

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

Answer 2

对于Javascript：

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

对于CSS：

将框的位置设为绝对位置right: -10;