液体层 - display:none 不起作用

Question

我正在尝试使用 "Fluid Layers" 并在调整 window 大小时（手动调整其宽度），我想在其中一个 Divs 上制作：display:none 但它没有这样做（根本不起作用）。

你能告诉我为什么第 18 行的 display:none 不起作用吗？。此外，当我想在容器内居中放置 3 个块时，我应该使用 DIVS 吗？或者你有更好的主意？

如果您知道实现液体层的更好/不同的想法，将很高兴。谢谢你的帮助。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
 {
  background-color: #FFFFFF;
 }

/* Extra small devices (phones, up to 480px) */
@media (max-width: 480px)
 {
  body
   {
    background-color: #FFFFFF;
   }
  .col3 { display: none;  }
 }

/* Extra small devices (usually phones from 480px to 768px) */
@media (min-width: 481px) and (max-width: 767px)
 {
  body
   {
    background-color: yellow;
   }
 }

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px)
 {
  body
   {
    background-color: #444;
   }
 }

/* Small devices (tablets / desktop, 768px and up) */
@media (min-width: 992px) and (max-width: 1199px)
 {
  body
   {
    background-color: green;
   }
 }

/* large desktops and up ----------- */
@media (min-width: 1200px)
 {
  body
   {
    background-color: lightblue;
   }
 }
</style>
</head>
<body>

<div style="width:100%; margin-left: 0 auto; background-color:#422220; text-align:center; overflow: hidden; padding:10px 0px;">
<div id="col1" style="width:29%; padding: 0; margin-left: 3%; margin-right:3%; background-color:#FFF333; display: inline-  block">Text</div>
<div id="col2" style="width:29%; padding: 0; margin-right:3%; background-color:#FFF333; display: inline-block">Text</div>
<div id="col3" style="width:29%; padding: 0; margin-right:3%; background-color:#FFF333; display: inline-block">Text</div>
</div>

</body>
</html>

Answer 1

您使用 class 而不是 id 作为选择器。

此外，我将所有列的通用样式移到了样式表中，而不是像您那样将内联样式移到样式表中。

body {
  background-color: #FFFFFF;
}
#col1,
#col2,
#col3 {
  width: 29%;
  padding: 0;
  margin-left: 3%;
  margin-right: 3%;
  background-color: #FFF333;
  display: inline-block;
}
/* Extra small devices (phones, up to 480px) */

@media (max-width: 480px) {
  body {
    background-color: #FFFFFF;
  }
  #col3 {
    display: none;
  }
}
/* Extra small devices (usually phones from 480px to 768px) */

@media (min-width: 481px) and (max-width: 767px) {
  body {
    background-color: yellow;
  }
}
/* Small devices (tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 991px) {
  body {
    background-color: #444;
  }
}
/* Small devices (tablets / desktop, 768px and up) */

@media (min-width: 992px) and (max-width: 1199px) {
  body {
    background-color: green;
  }
}
/* large desktops and up ----------- */

@media (min-width: 1200px) {
  body {
    background-color: lightblue;
  }
}

<div style="width:100%; margin-left: 0 auto; background-color:#422220; text-align:center; overflow: hidden; padding:10px 0px;">
  <div id="col1">Text</div>
  <div id="col2">Text</div>
  <div id="col3">Text</div>
</div>

液体层 - display:none 不起作用

Liquid Layers - display:none doesnt work

html

css

layer

liquid