Question

我正在尝试添加横幅广告，使其沿着我的博客文章的左侧投放。

但是到目前为止，我的尝试导致它出现在内容上方，从而将博客文章的内容推到页面的下方。

实时链接：https://www.moneynest.co.uk/pension-crisis-uk/

添加到头部：

<div id=”LeftFloatAds”><a href="https://www.pensionbee.com" target="_blank"><img src="https://www.moneynest.co.uk/wp-content/uploads/2018/12/160x600b.png" alt="PensionBee sidebar ad"></a></div>

已添加到CSS

@media only screen and (min-width: 1400px) and (max-width:500px) {
#LeftFloatAds{

left: 0px;

position: fixed;

text-align: center;

top: 200px;

}

}

仅供参考，我关注了this guide。

Answer 1

首先，替换...的位置，将其移到主要内容包装器中。
然后应用此CSS，

您只想在更宽的屏幕上显示它，然后使用它，

date

这会将横幅广告隐藏在小于1400像素的屏幕上。

@media only screen and (min-width: 1400px) {
    #LeftFloatAds {
        position: fixed;
        display: block;
        overflow: hidden;
        left: 0;
        top: 200px;
    }
}

Answer 2

首先，要小心div id引号。

<div id=”LeftFloatAds”>应该是<div id="LeftFloatAds">

然后，使用该媒体查询，仅在屏幕至少为1400px但小于500px时才将这些属性赋予元素，这是不可能的。像这样尝试：

@media only screen and (min-width: 500px) and (max-width:1400px)

粘性横幅与博客内容一起运行

2 个答案: