Question

我在我的网站上展示广告，但是为了防止无效点击，我想尝试在广告下面添加一个空格（广告是280px高），而我尝试过的空间也是280px太高，即使页面仍然是加载或广告尚未加载，空间将在那里，广告加载后，它只会占用该空间区域。

我尝试过这样做;

<div class="mt16 mb24" style="z-index: 1;">
        <div style="padding: 140px 0 140px 0; z-index: -1; position: absolute; left: 0px; top: 0px;">
                <!-- AD START -->
                bla bla ad code here
                <!-- AD END -->
        </div>
        <h4 class="mt0 mb0 text-uppercase">Sponsored AD</h4>
</div>

但它没有用。相反，它在广告的顶部和底部添加了填充。如果你能指出我在这里做错了什么，将不胜感激。（我本可以使用javascript制作一些东西，但我实际上并不知道java）

Answer 1

感谢Scott Marcus（https://stackoverflow.com/users/695364/scott-marcus）的回答。 “设置元素的高度和/或宽度可控制该元素上内容区域的大小” 我确实想过使用它，但不，我决定寻求帮助，但它有效！这是新代码：

<div class="mt16 mb24">
<div style="height: 300px; min-height: 250px; max-height: 400px;">
    <!-- AD START -->
    ad codes here
    <!-- AD END -->
</div>
<h4 class="mt0 mb0 text-uppercase">Sponsored AD</h4>

Answer 2

不确定这是否有帮助，但它模拟了在dom准备就绪后尝试加载图片，广告实际加载之前广告的占位符框架已经就位。（授予，img won'由于SO上的cors而导致负载

function loadAd() {
  var url = "http://image.prntscr.com/image/AG29sCCYS2_jPBlZxYuQ9g.png";
  setTimeout(function() {
    document.getElementById("ad1").src = url;
  }, 500);
}

#ad-space {
  padding: 140px 0 140px 0;
  z-index: -1;
  position: absolute;
  left: 0px;
  top: 0px;
  border: 1px solid #000;
  height: 280px;
  width: 140px;
}

<body onload="loadAd()">
  <div class="mt16 mb24" style="z-index: 1;">
    <div id="ad-space">
      <img id="ad1">
      <!-- AD END -->
    </div>
    <h4 class="mt0 mb0 text-uppercase">Sponsored AD</h4>
  </div>
</body>

如何在使用HTML / CSS加载之前为内容指定空间？

2 个答案: