为什么宽度：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不起作用

回答

相关问题