如何使用瀏覽器的寬度和主體的寬度動態計算固定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);
}