具有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，可能會造成這個問題什麼？我能做些什麼來解決它？

來源

2016-05-12 Mike

_「但我從未宣佈過這樣的裕量Q」 _，但你做到了：'#Q {float：left; margin：10px}' –

我認爲媒體查詢會覆蓋該值，並且加上該邊距將意味着總共20px的間距：左邊爲10，右邊爲10 – Mike

的線索是在名稱中。 CSS代表層疊樣式表，因此任何具有相同特性的CSS將始終由CSS堆棧中的最後一個CSS規則覆蓋。第一次媒體查詢後，CSS中的兩個類將應用於所有媒體大小，因爲您沒有爲這兩個媒體指定一個，並且因爲它們是在第一個媒體之後的，所以它們將優先。

來源

2016-05-12 19:11:54

這對我來說似乎有意義。我做了改變，它工作。 – 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){

來源

2016-05-12 19:06:10 adys

有申報#Q保證金，這將導致此問題：

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

它設置爲margin: auto;，它會工作。

此外，如果在另一種情況下，你將不能修改屬性，有兩種簡單的方式（儘管它的更好試圖避免它們）：

設置與!important標記的新屬性; e.g. margin: auto !important;
將新屬性的內嵌樣式（就像你有文本對齊到#Q），這在鏈接的樣式表的優先級裏面

來源

2016-05-12 19:21:39 Siavas

具有100％寬度的CSS元素落在視口外

回答

相關問題