0

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

在此处输入图像描述

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

谢谢。

编辑:对不起,我忘了提到我制作盒子的方式。它完全由 CSS 驱动。包含元素是相对定位的,而盒子是绝对定位的。它们保持在页面外(左:-9999px;)并在日历单元格悬停时显示。这个过程似乎更快捷。因此,定位元素以避免此问题是不可能的。

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

4

2 回答 2

0

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

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

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

于 2012-09-26T22:19:01.213 回答
0

对于 Javascript:

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

对于 CSS:

使盒子的位置绝对和right: -10;

于 2012-09-26T22:19:36.553 回答