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都保持固定，但我想动态计算左侧广告中的左侧位置和右侧广告中的右侧定位，以便能够坐在身体左侧或右侧10px处。

我的身体始终是980px并居中，我根据浏览器宽度计算出数学运算。我的广告的宽度为160像素。

左AD的宽度计：

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

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

右边广告的宽度计算：

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

（浏览器宽度 - X）+10

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

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

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

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

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

此外，如果有人知道这个问题的更快解决方案，那么我的div可以让身体左侧或右侧10px。请告诉我。

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

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

1 个答案: