Question

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

例如......

宽屏：

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

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

感谢您提供的任何帮助。

Answer 1

我会做这样的事情，除非你真的需要应用一个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;
}
}

Answer 2

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

＆＃13;

/* Apply inner styles if the viewport's width is at least 500px */
@media (min-width: 500px) {
  .responsive {
    width:33.3333%;
    float:left;
  }
}

＆＃13;

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

＆＃13;

Answer 3

您的问题最好通过自然设计模式解决，而无需借助媒体查询。这样考虑，如果您使用css float:left;并排排列列，并且每列定义一些min-width值。然后，一旦屏幕宽度小于您定义的宽度值X 3，您的列将垂直布局

响应式html div元素？

3 个答案: