如何使用浏览器宽度和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 像素。

由于我的身体始终为 980 像素并居中，因此我根据浏览器宽度计算出了执行此操作的数学方法。我的广告宽度为 160 像素。

左侧广告的宽度计算：

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

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

右侧广告的宽度计算：

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

（浏览器宽度 - X）+10

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

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

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

左侧广告的第二次计算更复杂，但也会将左侧广告设置在正文左侧 10px 处。

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

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

Answer 1

如果我理解正确，您希望广告与居中的“容器”（而不是 body）相距 10 像素。

如果是这样，只需将每个广告放置在距其各自侧面 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);
}