-1

我正在尝试获取窗口的宽度和高度 + div 的宽度和高度以找到调整后的宽度。我也在尝试用 jquery 绝对定位 div，但我的代码不起作用。我将在下面提供代码。

CSS：

#inner {
  width: 500px; height: 300px;
  background: #ff0000;
}

jQuery：

$(document).ready(function() {

  var screenWidth = $(window).width();
  var screenHeight = $(window).height();

  var boxWidth = $("#inner").width();
  var boxHeight = $("#inner").height();

  var adjustedWidth = screenWidth - boxWidth;
  var adjustedHeight = screenHeight - boxHeight;

  $("#inner").css('position', 'absolute');
  $("#inner").css('top', adjustedWidth + 'px');
  $("#inner").css('left', adjustedHeight + 'px');

});

我在我的 jQuery 中做错了什么？希望我的解释很清楚。

4

3 回答 3

1

如果你试图在右下角对齐你的 div，那么你混合了 top->adjustedWidth 和 left->adjustedHeight：

$("#inner").css('top', adjustedWidth + 'px');
$("#inner").css('left', adjustedHeight + 'px');

什么时候应该反过来：

$("#inner").css('top', adjustedHeight + 'px');
$("#inner").css('left', adjustedWidth + 'px');

除此之外，您的代码看起来可以正常工作。

此外，在尝试更改 CSS 宽度或高度时，您不需要添加“px”。

于 2013-02-03T01:01:19.333 回答
0

无需为此使用 JavaScript。当绝对定位的东西，left不是top唯一可以使用的东西时；相反，您可以在适当的地方使用right和bottom。例如，要在右下角放置一些东西，就像你正在做的那样，你可以使用这个：

#something {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 300px;
    height: 150px;
    background: red;
}

试试看。

于 2013-02-04T02:26:41.460 回答
0

如果您的代码包括获取组件的大小（尤其是页面上有图像），您希望将代码放在load处理程序中而不是ready处理程序中，因为ready在所有图像下载之前执行并且页面大小可能会在此之后发生变化。

还有你的top和left应该交换的。

$(document).on('load', function() {

  var screenWidth = $(window).width();
  var screenHeight = $(window).height();

  var boxWidth = $("#inner").width();
  var boxHeight = $("#inner").height();

  var adjustedWidth = screenWidth - boxWidth;
  var adjustedHeight = screenHeight - boxHeight;

  $("#inner").css('position', 'absolute');
  $("#inner").css('top', adjustedHeight + 'px');
  $("#inner").css('left', adjustedWidth + 'px');

});
于 2013-02-04T02:34:08.333 回答