具有100％宽度的CSS元素落在视口外

问题描述：

我在这里有代码，它根据用户的屏幕尺寸确定要使用的广告的大小。我也做到了这一点，如果屏幕太小，广告以自动保证金为中心。具有100％宽度的CSS元素落在视口外

当我跑了谷歌网页速度洞察的页面，我得到这个消息：

页面内容是421个CSS像素，但检视仅宽411 CSS像素。以下元素不属于视口：

元素广告位于视口之外。

这表明，我认为在某种程度上元Q有边距向左并道达尔10px的元素的权利，但我从来没有宣布这类保证金为Q.在由谷歌所做的测试广告单元的320x100

HTML：

<div id="Q"> 
    Advertisement<br> 
    <ins id="Z"> 
     <!-- adsense box --> 
    </ins> 
</div>

CSS：

@media screen and (max-width:450px){ 
    #Q{ 
     width:100%; 
     margin:0 
    } 
    #Q,#Z{ 
     margin:auto; 
     overflow:hidden 
    } 
} 
#Q{ 
    float:left; 
    margin:10px 
} 
#Z{ 
    display:block; 
    width:234px; 
    height:60px 
} 
@media screen and (min-width:319px){ 
    #Z{ 
     width:320px; 
     height:100px 
    } 
} 
@media screen and (min-width:470px){ 
    #Z{ 
     width:300px; 
     height:250px 
    } 
}

我已经使用了下面的共同配置的视德：

<meta name="viewport" content="width=device-width,initial-scale=1">

这是在桌面浏览器的各项决议没有进行测试的问题，其产生的网页上面，速度洞察问题的页面。

http://new.clubcatcher.com/m/pictures/bloke/2016apr02/1

有没有在我的CSS，可能会造成这个问题什么？我能做些什么来解决它？

_“但我从未宣布过这样的裕量Q” _，但你做到了：'#Q {float：left; margin：10px}' –

我认为媒体查询会覆盖该值，并且加上该边距将意味着总共20px的间距：左边为10，右边为10 – Mike

答

的线索是在名称中。 CSS代表层叠样式表，因此任何具有相同特性的CSS将始终由CSS堆栈中的最后一个CSS规则覆盖。第一次媒体查询后，CSS中的两个类将应用于所有媒体大小，因为您没有为这两个媒体指定一个，并且因为它们是在第一个媒体之后的，所以它们将优先。

这对我来说似乎有意义。我做了改变，它工作。 – Mike

答

移动这样的：

#Q{ 
    float:left; 
    margin:10px 
} 
#Z{ 
    display:block; 
    width:234px; 
    height:60px 
}

到你的CSS文件的顶部。

你也应该把这个块

@media screen and (min-width:470px){

在此之前

@media screen and (min-width:319px){

答

有申报#Q保证金，这将导致此问题：

#Q{ 
    float:left; 
    margin:10px 
}

它设置为margin: auto;，它会工作。

此外，如果在另一种情况下，你将不能修改属性，有两种简单的方式（尽管它的更好试图避免它们）：

设置与!important标记的新属性; e.g. margin: auto !important;
将新属性的内嵌样式（就像你有文本对齐到#Q），这在链接的样式表的优先级里面

具有100％宽度的CSS元素落在视口外

相关推荐