响应html div元素？

我有3个HTMLdiv元素，我希望看到它们并排出现在宽屏幕上，但随着屏幕宽度的缩小，我希望看到它们变得垂直

例如

宽屏幕：

-----------
abc def ghi
-----------

窄屏幕：

abc
def
ghi

目前，有三个如下所示的HTML div（在另一个div块中）只能垂直布局它们

<div id="Master_Div">
  <div id="Div_1">
    <p>abc</p>
  </div>
  <div id="Div_2">
    <p>def</p>
  </div>
  <div id="Div_3">
    <p>ghi</p>
  </div>
</div>

abc

def

ghi

也许，答案与媒体查询和/或响应性设计有关，但我不确定

感谢您提供的任何帮助。

是的，有一些功能允许您控制移动屏幕的布局，例如：

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

 /* stack vertically */

}

---

一个简单的媒体查询就可以做到这一点

/*如果视口的宽度至少为500px，则应用内部样式*/
@介质（最小宽度：500px）{
.反应迅速{
宽度：33.3333%；
浮动：左；
}
}

abc

def

ghi

您的问题最好通过自然设计模式来解决，而无需借助媒体查询。这样考虑一下，如果您使用css

float:left并排排列列

并定义每列的

最小宽度
值。然后，一旦屏幕宽度小于您定义的宽度值x3，您的列将垂直排列
我会这样做，除非您实际需要应用ID，否则类对于css中一个赋值的多个div更容易，而且它们占用的空间更少

html---
<div class="wrapper">
   <div class="third">Something here</div>
   <div class="third">Something here</div>
   <div class="third">Something here</div>
</div>

css---
.third {
    width: 33.333333%
    float:left;
}
@media screen and (max-width: 767px) {
.third {
    width: 100%;
    float:none;
}
}

html---
这里有东西
这里有东西
这里有东西
css---
.第三{
宽度：33.333%
浮动：左；
}
@媒体屏幕和屏幕（最大宽度：767px）{
.第三{
宽度：100%；
浮动：无；
}
}
您对此有任何css吗？如果是，请将其添加到问题中。这是一件非常简单的事情，我不确定你的问题出在哪里当它足够大，可以显示3个中的2个时会发生什么？