液体层 - 显示：没有不起作用答案

【问题标题】：Liquid Layers - display:none doesnt work液体层 - 显示：没有不起作用
【发布时间】：2016-04-05 05:45:07
【问题描述】：

我正在尝试使用“Fluid Layers”，并且在调整窗口大小（手动调整其宽度）时，我想在其中一个 Div 上制作： display:none 但它没有这样做（只是没有工作）。

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

如果您知道的话，很高兴获得更好/不同的实施 Liquid Layers 的想法。谢谢你的帮助。

这是我的代码：

<!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>

【问题讨论】：

在第 18 行，您使用 'col3' 作为类而不是 id，试试 #col3 { display: none; } - jsfiddle.net/4uknmLe2/1

标签： html css layer liquid

【解决方案1】：

您使用类而不是 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>

【讨论】：