如何使用浏览器的宽度和主体的宽度动态计算固定div元素的定位宽度

Question

我使用下面的CSS样式为两个div，将在我的网站上的摩天大楼广告在我的身体左右。

/*-----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 of左右。

我的身体总是980 on和居中，我想出了基于浏览器宽度的数学方法。我的广告宽度是160 in。

左AD的宽度Calc：

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

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

右广告的宽度Calc：

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

(浏览器宽度- X) +10

计算说明:我从动态浏览器宽度中减去980的身体宽度，然后除以2，得到浏览器结束和身体结束之间的空空间的值。这是广告和坐席的地方。

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

正确的广告很简单。它是浏览器宽度减去X，这是第一次计算的空空间值。然后再加10便士。这将把广告10倍设置在身体的右边。

左广告的第二次计算比较复杂，但也会将左广告10 to设置到身体的左边。

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

此外，如果有人知道这个问题的更快的解决办法，这将允许我的div坐在10 to左右的身体。请让我知道。

Answer 1

如果我正确地理解了您的意思，那么您希望广告与居中的“容器”(而不是body)保持10 If的距离。

如果是这样的话，这仅仅是一个定位的问题，每一个广告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);
}