Html 液体层-显示：无不起作用
我正在尝试使用“流体层”，在调整窗口大小（手动调整其宽度）时，我想在其中一个div上设置：display:none，但它没有这样做（根本不起作用） 你能告诉我为什么显示：第18行的none不起作用吗？。另外，当我想在一个容器中居中放置3个块时，我应该使用div吗？还是你有更好的主意给我 如果你知道液体层，我很乐意得到更好的/不同的想法。谢谢你的帮助 这是我的密码：Html 液体层-显示：无不起作用,html,css,layer,liquid,Html,Css,Layer,Liquid,我正在尝试使用“流体层”，在调整窗口大小（手动调整其宽度）时，我想在其中一个div上设置：display:none，但它没有这样做（根本不起作用） 你能告诉我为什么显示：第18行的none不起作用吗？。另外，当我想在一个容器中居中放置3个块时，我应该使用div吗？还是你有更好的主意给我 如果你知道液体层，我很乐意得到更好的/不同的想法。谢谢你的帮助 这是我的密码： <!DOCTYPE html> <html> <head> <meta name="vie
<!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>
身体
{
背景色：#FFFFFF；
}
/*超小型设备（手机，高达480px）*/
@介质（最大宽度：480px）
{
身体
{
背景色：#FFFFFF；
}
.col3{显示：无；}
}
/*超小型设备（通常是480px到768px的手机）*/
@介质（最小宽度：481px）和（最大宽度：767px）
{
身体
{
背景颜色：黄色；
}
}
/*小型设备（平板电脑、768px及以上）*/
@介质（最小宽度：768px）和（最大宽度：991px）
{
身体
{
背景色：#444；
}
}
/*小型设备（平板电脑/台式机、768px及以上）*/
@介质（最小宽度：992px）和（最大宽度：1199px）
{
身体
{
背景颜色：绿色；
}
}
/*大型台式机及以上-----------*/
@介质（最小宽度：1200px）
{
身体
{
背景颜色：浅蓝色；
}
}
正文
正文
正文
正文{
背景色：#FFFFFF；
}
#col1，
#col2，
#可乐{
宽度：29%；
填充：0；
左缘：3%；
保证金权利：3%；
背景色：#FFF333；
显示：内联块；
}
/*超小型设备（手机，高达480px）*/
@介质（最大宽度：480px）{
身体{
背景色：#FFFFFF；
}
#可乐{
显示：无；
}
}
/*超小型设备（通常是480px到768px的手机）*/
@介质（最小宽度：481px）和（最大宽度：767px）{
身体{
背景颜色：黄色；
}
}
/*小型设备（平板电脑、768px及以上）*/
@介质（最小宽度：768px）和（最大宽度：991px）{
身体{
背景色：#444；
}
}
/*小型设备（平板电脑/台式机、768px及以上）*/
@介质（最小宽度：992px）和（最大宽度：1199px）{
身体{
背景颜色：绿色；
}
}
/*大型台式机及以上-----------*/
@介质（最小宽度：1200px）{
身体{
背景颜色：浅蓝色；
}
}
正文
正文
正文
#col3{display:none；}