javascript - 如何利用浏览器宽度和body宽度动态计算固定div元素的定位宽度

Question

我正在为两个 div 使用以下 CSS 样式，这将在我的网站上将摩天大楼广告放置在正文的左侧和右侧。

/*-----Sky Scraper ad----*/
#SkyAdLeft{
 width: 160px;
 display: block;
 position: fixed;
 top: 100px;
 left: 10px;
  height: 600px;
 z-index: 7;
}
#SkyAdRight{
 width: 160px;
  display: block;
 position: fixed;
 top: 100px;
 right: 10px;
 height: 600px;
 z-index: 7;
}

我希望每个 DIV 保持固定，但我想动态计算左侧广告中的左侧位置和右侧广告中的右侧定位，以便能够位于主体左侧或右侧 10 像素处。

由于我的 body 始终为 980px 并居中，我想出了基于浏览器宽度的数学运算。我的广告宽度为 160 像素。

左 AD 的宽度计算:

(浏览器宽度 - 980)/2 = X

(浏览器宽度 - (160 + X + 980)) -10

右侧广告的宽度计算:

(浏览器宽度 - 980)/2 = X

(浏览器宽度 - X)+10

计算说明:我从动态浏览器宽度中减去主体宽度 980，然后除以 2 以获得浏览器末端和主体末端之间的空白区域的值。这就是广告所在的位置。

每个广告的第二次计算然后计算广告在浏览器屏幕中的位置。

正确的广告很简单。它是浏览器宽度减去 X，这是第一次计算中的空白空间值。然后添加 10px。这会将广告设置为主体右侧 10 倍。

左侧广告的第二个计算更复杂，但也会将左侧广告设置为距主体左侧 10 像素。

如何使用 jquery 或 javascript 进行这些计算以及在哪里运行 jquery？在 css 样式文件或我的 footer.php 文件中 div 在代码中的位置？

此外，如果有人知道这个问题的更快解决方案，可以让我的 div 位于正文左侧或右侧 10 像素处。请告诉我。

Answer 1

如果我理解正确的话，您希望广告距离居中的“容器”(不是 body)10px。

如果是这样，只需将每个广告放置在距其各自一侧 50% 的位置并调整边距即可

Codepen Demo

**HTML**

<div class="Ad left">

</div>

<div class="Ad right">

</div>

<div class="container">

</div>

CSS

.container {
  width:980px;
  margin: 0 auto;
  height:500px;
  background-color: grey;
}

.Ad {
  width: 160px;
  display: block;
  position: fixed;
  top: 10px;
  height: 600px;

}

.left {
  left: 50%;
  background-color: orange;
  margin-left: calc(-160px - (980px/2) - 10px);
  /* element width + 50 % of container width + required distance */
}


.right {
  right:50%;
  background-color: purple;
  margin-right: calc(-160px - (980px/2) - 10px);
}