如何使用浏览器的宽度和主体的宽度动态计算固定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保持固定，但是我想动态地计算左广告中的左位置和右广告中的右位置，以使其能够位于主体左侧或右侧10px。

由于我的身体始终为980px，居中，因此我根据浏览器的宽度计算出了数学公式。 我的广告的宽度为160像素。

左广告的宽度计算：

（浏览器宽度-980）/ 2 = X

（浏览器宽度-（160 + X + 980））-10

正确广告的宽度计算：

（浏览器宽度-980）/ 2 = X

（浏览器宽度-X）+10

计算说明：我要从动态浏览器宽度中减去980的正文宽度，然后除以2，以获取浏览器末尾与正文末尾之间的空白值。 这是放置广告的地方。

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

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

左侧广告的第二种计算方法较为复杂，但会将左侧广告设置为距正文左侧10px。

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

另外，如果有人知道可以更快地解决此问题，那么我的div可以坐在身体左侧或右侧10px。 请告诉我。

Answer 1

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

如果是这样，则只需将每个广告放置在距其相应侧面50％的位置，然后调整边距

Codepen演示

**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);
}