CSS 宽度为 100% 的元素落在视口之外

Question

我这里有代码可以根据用户的屏幕尺寸确定要使用的广告尺寸。我还做了这样，如果屏幕太小，广告会自动居中。

当我运行具有 google 页面速度洞察力的页面时，我收到此消息：

The page content is 421 CSS pixels wide, but the viewport is only 411 CSS pixels wide. The following elements fall outside the viewport:

The element Advertisement falls outside the viewport.

这对我来说意味着元素 Q 的左右边距总计为 10px，但我从未为 Q 声明过这样的边距。google 完成的测试中的广告单元是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 中是否有任何可能导致此问题的内容？我能做些什么来修复它？

Answer 1

移动这个：

#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){

Answer 2

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

Answer 3

为#Q声明了保证金，导致了这个问题：

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

将其设置为 margin: auto; 即可。

此外，如果在另一种情况下您将无法修改属性，则有两个简单的选项（尽管最好避免使用它们）：

使用!important标签设置新属性； e.g. margin: auto !important;
将新属性放在内联样式中（就像您将文本对齐到 #Q 一样），它优先于链接样式表

CSS 宽度为 100% 的元素落在视口之外

CSS element with 100% width falls outside of viewport

html

javascript

css

viewport

media-queries