html - 响应式 html div 元素？

Question

我有 3 个 HTML div 元素，我希望它们在宽屏幕上并排放置，但是随着屏幕宽度的缩小，我希望它们变成垂直的。

例如……

宽屏:

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

窄屏:

abc
def
ghi

目前，具有如下所示的三个 HTML div(在另一个 div block 中)只能将它们垂直放置...

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

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

感谢您提供的任何帮助。

Answer 1

我会做这样的事情，除非你真的需要申请一个 ID，类对于多个 div 来说更容易，在 css 中有一个分配，而且它们占用的空间更少。

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