Question

我的html中有一些div，它们要在桌面上并排显示并在移动设备上堆叠显示。我使用网格将其显示在桌面上。在我的CSS文件中，我添加了媒体查询

@media(max-width:768px){
divselector {
display: block
}
}

但是div仍然并排出现。我可能做错了什么？

Answer 1

在此处jsfiddle

<div class="container">
   <div class="a"></div>
   <div class="b"></div>
</div>

            .container {
          font-size: 0;
        }

        .container div {
          display: inline-block;
          width: 100px;
          height: 30px;
          background: #000000;
          font-size: 12px;
        }

        .container div.a {
          width: 100px;
          background: #555555;
        }

        .container div.b {
          width: 100px;
          background: #333333;
        }

        @media screen and (max-width: 992px) {
          .container {
            display: block;
          }
        }

        /* On screens that are 600px or less */
        @media screen and (max-width: 600px) {
          .container {
            display: block;
          }
        }

Answer 2

在移动模式下，您可以使用absolute定位它们，以便所有div彼此堆叠

.ex {
  width: 200px;
  height: 50px;
  padding: 15px;
  border: 2px solid #bada55;
  display: inline-block;
  background-color: #e5e5e5;
}

@media screen and (max-width: 800px) {
  .ex {
    position:absolute;
  }
}

<div class="ex">1111</div>
<div class="ex">2222</div>

Answer 3

可悲的是，这些建议对我都不起作用。

我一直在尝试，直到得到我想要的东西为止。它仍然基于网格。


@media (max-width: 768px) {
    div#dashboard_container,
    {
        display: grid;
        grid-template-columns: auto;
    }
}

问题是，如果我在媒体查询中仅指定#dashboard_container，则代码无效。我不完全理解为什么。

小提琴here展示了完整的解决方案。

如何设置从网格到块显示的div样式？

3 个答案: