Question

在@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>

Answer 1

因为它具有display: table-cell的属性，会强制它像表一样。

您只需在当前代码中添加display: block即可。

或者，用一个display: none替换代码就可以了。

或者，使用相当奇怪的样式，请参见下文。

＆＃13;

* {
  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;
  }
}

＆＃13;

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

＆＃13;

Answer 2

这是因为您正在使用pointLabelsFormat: myBool? "(@xPoint Hz, @yPoint dB)" : ""进行布局。

表格有自己计算宽度的方法，因此设置宽度并不意味着它就是这样。

尝试使用display: table代替

Answer 3

如果您不想使用display: none，可以添加以下内容：

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

为什么宽度：0不起作用

3 个答案: