重置媒体查询的元素[重复]答案

【问题标题】：reset elements for media queries [duplicate]重置媒体查询的元素[重复]
【发布时间】：2021-12-19 15:10:27
【问题描述】：

谁能建议一种撤消显示属性的方法？

我给了三个 div 的值；显示：inline-flex；以便它们水平显示。创建媒体查询时，我想将其删除，以便它们垂直显示。我以为显示：初始；会工作，但没有运气。也不用 display: block 单独定位 div；

【问题讨论】：

欢迎。请参阅How to Ask 并拨打tour。您需要提供更多信息，最好是在功能正常的 sn-p 中。
请提供一些代码以便我们提供帮助。
请提供代码以便我们为您提供帮助
请提供足够的代码，以便其他人更好地理解或重现问题。

标签： html css

【解决方案1】：

您没有给出您使用的代码，但我仍然理解这个问题。您在三个 div 上使用 display: inline-flex;，内联 flex 是用于 div 容器 的属性，它将对齐所有 div 内联。

我建议的一个简单解决方案是在这些 div 周围包裹一个容器，并为容器提供 display: flex 的属性

这里是 HTMl

<div class="container">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

这里是 CSS

.container{
    display: flex;
    width: 100%;
}
#div1,#div2,#div3{
    width: 100px;
    height: 100px;
    border: 2px solid #000;
}

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

另外，这里有一个链接，您可以查看它的实际效果，调整屏幕大小以查看有效的媒体查询https://codepen.io/codebyrudra/pen/NWvyVzd

【讨论】：

谢谢你，Rudy，这很有效。我一天中大部分时间都在用这个把头发拉出来。
这是我的荣幸 :)