Question

我尝试使用＆＃34;流体图层＆＃34;当调整窗口大小（手动调整其宽度）时，我想在其中一个Div上显示：display：none但是它没有这样做（根本没有工作）。

你能告诉我为什么显示：第18行没有人不工作吗？另外，当我想在容器内居中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>

Answer 1

您使用了一个类而不是一个id作为选择器。

此外，我将所有cols的常用样式移动到样式表而不是内联样式。

＆＃13;

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

＆＃13;

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

＆＃13;

液体图层 - 显示：无效无效

1 个答案: