CSS：float：none;被忽略

在this website，當視口寬度減小到595px或以下時，下面的CSS應適用：CSS：float：none;被忽略

@media (max-width:595px) { 
    #header-left,#header-right { 
     display: block; 
     width: 100%; 
     float: none; 
    } 
}

的瀏覽器識別CSS，並且它出現活性，然而，#header-left（它包含標識）不是100％寬，或者是#header-right（其中包含電話號碼）。

也就是說，#header-left & #header-right仍嘗試佔用寬度的一半，並且並排顯示，而不是彼此上下。

爲什麼會發生這種情況？謝謝。

來源

2015-07-20 Steve

你錯過了和@media和（max之間-width：595px）你也應該指定屏幕。嘗試把你的CSS後重要 –

你使用引導？因爲使用它，你可以使用'col-sm-12'或'col-xs-12'等類將你的標題全屏放在小屏幕上。如果不是，請嘗試使用！寬度後重要：100％;例如'width：100％！important;' – VDarricau

所有其他@media查詢都可以在（）中沒有空格的情況下正常工作。瀏覽器正在激活'width：100％;'規則（它在Firefox代碼檢查器中處於活動狀態）。我不使用引導瓦倫丁。添加！重要的不會改變任何東西。規則仍然有效，只是工作不正常。 – Steve

從#logo {position: absolute;top: 0px;left: 0px;}刪除position:absolulte;並從#menu刪除然後你的代碼工作正常。

來源

2015-07-20 04:34:25

謝謝！在視圖端口寬度500px - > 595px之間，#menu不可見。 – Steve

固定！我調整了CSS。 – Steve

你應該重寫你的CSS具體到595px大小以下評論規則：

#logo { 
    /* position: absolute; */ 
    /* top: 0px; */ 
    /* left: 0px; */ 
} 
#header-right { 
    width: 50%; 
    float: right; 
    padding-top: 8px; 
    /* text-align: right; */ 
} 
#menu { 
    /* position: absolute; */ 
    /*top: 80px;*/ 
    /*left: 0px;*/ 
    background: url(images/menu-bg.png) no-repeat; 
    width: 960px; 
    height: 55px; 
}

注：重寫規則評論

來源

2015-07-20 04:39:28

CSS：float：none;被忽略

回答

相關問題