在 中@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;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句