CSS規則工作@media（max-width：550px）但不是@media（max-width：750px）

Question

.float-left-diva, .float-left-divb 

如果放置該規則（div將停止浮動並變爲100％寬度）在@media max-width：550px但不在@media max-width：750px。

我不明白爲什麼。我只是複製/粘貼或突出顯示並拖動它來移動它，並確保我沒有忽略它。或任何結局。我試過把它放在.gallery類的上面和下面。這正是它在style.css中的輸入方式。

@media (max-width: 750px) { 

.float-left-diva, .float-left-divb { 
width:100%; 
float:none; 
margin:10px auto; 
border:none; 
} 
.gallery { 
width:48%; 
margin:20px 1%; 
float:left; 
text-align:center; 
} 
} 


@media (max-width: 550px) { 

img.floatleft { 
float:none; 
margin:10px auto 
} 
.homeboxes { 
width:90%; 
margin:20px 1%; 
float: none; 
text-align:center; 
border:1px solid #A48A73; 
} 
#headerblock { 
width:100%; 
margin:0 auto; 
} 
.float-left-div, .float-left-div1, .float-left-div2 { 
width:100%; 
float:none; 
margin:10px auto; 
border:none; 
} 
} 

因爲它的工作@ 550px我知道我沒有類型O在我的HTML相比，CSS。而且我知道所有其他的東西都必須正確輸入，因爲它符合@ 550px的要求。我只想讓div在屏幕達到最大寬度750px時停止浮動。 Div.float-left-diva有一些文本，而.float-left-divb有一個電子郵件表單。我也不相信它是瀏覽器緩存。如果我將它改回@ 550，它會再次運作。

Answer 1

這可能是因爲樣式表級聯。

嘗試腳本底部的最高像素值。

或者添加一個最小寬度以防止覆蓋的東西大於550。