爲什麼寬度：0不起作用

在@media screen and (max-width: 700px)，我設置了aside {width: 0}，但它並沒有消失。在調整大小後，窗口仍然爲空的空間，爲什麼會發生這種情況，我該如何解決這個問題？爲什麼寬度：0不起作用

* { 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    background-color: #eee; 
 
} 
 

 
.wrapper { 
 
    height: 100%; 
 
    display: table; 
 
    width: 100%; 
 
    text-align: center; 
 
    border-collapse: collapse; 
 
} 
 

 
header { 
 
    box-sizing: border-box; 
 
    display: table-row; 
 
    height: 50px; 
 
    background-color: #eee; 
 
    border-bottom: 1px solid black; 
 
} 
 

 
main { 
 
    height: 100%; 
 
    display: table; 
 
    width: 800px; 
 
    margin: 0 auto; 
 
    background-color: #fff; 
 
} 
 

 
section { 
 
    display: table-cell; 
 
} 
 

 
aside { 
 
    display: table-cell; 
 
    box-sizing: border-box; 
 
    border-left: 1px solid black; 
 
    width: 300px; 
 

 
    /*__transition*/ 
 
    opacity: 1; 
 
    transition: all .25s; 
 
} 
 

 
footer { 
 
    box-sizing: border-box; 
 
    border-top: 1px solid black; 
 
    display: table-row; 
 
    height: 50px; 
 
    background-color: #eee; 
 
} 
 

 
@media screen and (max-width: 800px) { 
 

 
    main { 
 
    width: 100%; 
 
    } 
 
} 
 

 
@media screen and (max-width: 700px) { 
 

 
    section { 
 
    width: 100%; 
 
    } 
 

 
    aside { 
 
    opacity: 0; 
 
    width: 0; 
 
    } 
 
}

<html> 
 
    <body> 
 
    <div class="wrapper"> 
 
     <header>HEADER</header> 
 
     <main> 
 
     <section>SECTION</section> 
 
     <aside>ASIDE</aside> 
 
     </main> 
 
     <footer>FOOTER</footer> 
 
    </div> 
 
    </body> 
 
</html>

來源

2017-07-06 Ramzan Chasygov

爲什麼不直接使用'顯示：none'？ – domsson

然後轉換不能正常工作 –

如果你不想使用display: none你可以補充一點：

@media screen and (max-width: 700px) { 
    aside { 
    opacity: 0; 
    width: 0; 
    border: none; 
    font-size: 0; 
    } 
}

來源

2017-07-06 09:49:34 makshh

很棒的工作，謝謝，5分鐘後我接受你的回答 –

這是因爲你使用display: table使佈局。

表格有他們自己的方法來計算它們的寬度，所以設置寬度並不意味着它就是這樣。

嘗試使用display: none代替

來源

2017-07-06 09:46:13

然後不工作平穩過渡 –

爲什麼你想在@media查詢上做一個轉換？這是沒有必要的，因爲用戶通常不會調整屏幕大小。而在手機上，已經有一個旋轉屏幕的動畫。 –

它想要客戶端 –

因爲它有display: table-cell屬性，這將迫使它像一個表。

您可以在當前的代碼中添加display: block。

或者，用一個單獨的display: none代替代碼就可以了。

或者，相當怪異的造型，請參閱下文。

* { 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    background-color: #eee; 
 
} 
 

 
.wrapper { 
 
    height: 100%; 
 
    display: table; 
 
    width: 100%; 
 
    text-align: center; 
 
    border-collapse: collapse; 
 
} 
 

 
header { 
 
    box-sizing: border-box; 
 
    display: table-row; 
 
    height: 50px; 
 
    background-color: #eee; 
 
    border-bottom: 1px solid black; 
 
} 
 

 
main { 
 
    height: 100%; 
 
    display: table; 
 
    width: 800px; 
 
    margin: 0 auto; 
 
    background-color: #fff; 
 
} 
 

 
section { 
 
    display: table-cell; 
 
} 
 

 
aside { 
 
    display: table-cell; 
 
    box-sizing: border-box; 
 
    border-left: 1px solid black; 
 
    width: 300px; 
 

 
    /*__transition*/ 
 
    opacity: 1; 
 
    transition: all .25s; 
 
} 
 

 
footer { 
 
    box-sizing: border-box; 
 
    border-top: 1px solid black; 
 
    display: table-row; 
 
    height: 50px; 
 
    background-color: #eee; 
 
} 
 

 
@media screen and (max-width: 800px) { 
 

 
    main { 
 
    width: 100%; 
 
    } 
 
} 
 

 
@media screen and (max-width: 700px) { 
 

 
    section { 
 
    width: 100%; 
 
    } 
 

 
    aside {  
 
    display: none; 
 
    
 
    /* OR */ 
 
    
 
    display: table-cell; 
 
    border: none; 
 
    opacity: 0; 
 
    width: 0; 
 
    font-size: 0; 
 
    
 
    /* OR */ 
 
    
 
    display: block; 
 
    opacity: 0; 
 
    width: 0; 
 
    } 
 
}

<html> 
 
    <body> 
 
    <div class="wrapper"> 
 
     <header>HEADER</header> 
 
     <main> 
 
     <section>SECTION</section> 
 
     <aside>ASIDE</aside> 
 
     </main> 
 
     <footer>FOOTER</footer> 
 
    </div> 
 
    </body> 
 
</html>

來源

2017-07-06 09:50:12

平穩過渡不起作用 –

你如何準確地完成過渡？請在你的問題中詳細闡述一下？ –

@RamzanChasygov看到我更新的答案，以檢查它是否符合過渡事件 –

爲什麼寬度：0不起作用

回答

相關問題