在@media screen and (max-width: 700px)中，我设置了aside {width: 0}，但它并没有消失。调整大小后，窗口仍然为空空间，width: 52px，为什么会发生这种情况，我该如何解决？
* {
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>最佳答案
如果你不想使用display: none你可以添加这个:
@media screen and (max-width: 700px) {
aside {
opacity: 0;
width: 0;
border: none;
font-size: 0;
}
}
关于javascript - 为什么宽度为 : 0 doesn't work，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44945346/