Question

在此主div中，我在一行上有一个div和两个div。但是我想在更改浏览器窗口时将第二个div移动到第一个div下。我不要水平滚动。

div.footban {
  width: 100%;
  text-align: center;
  display: flex;
}

div.footban div {
  border: solid 1pt black;
  display: table;
  min-width: 300px;
  margin: 0 auto;
}

<div class="footban">
  <div>Hello Hello Hello Hello Hello Hello</div>
  <div>Hello Hello Hello Hello Hello Hello</div>
</div>

Answer 1

您所要做的就是将flex-wrap: wrap;添加到div.footban：）

div.footban {
  width: 100%;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}
div.footban div {
  border: solid 1pt black;
  display: table;
  min-width: 300px;
  margin: 0 auto;
}

<div class="footban">
  <div>Hello Hello Hello Hello Hello Hello</div>
  <div>Hello Hello Hello Hello Hello Hello</div>
</div>

Answer 2

您还可以使用@media查询

只需添加display: block

@media all and (max-width:768px){
    div.footban{display: block;}
}

Answer 3

div.footban {
    display: flex;
}

当您像以前一样将元素的显示属性设置为flex时，默认情况下flex-direction设置为row，这会将每个直接子元素放在同一行上

调整窗口大小时，您可以设置一些媒体查询，该查询对您的浏览器窗口的特定大小有效，并将flex-direction重置为column，这将使{{ 1}}保持垂直对齐，第二个 div 将位于第一个

下

div.footban

div中的两个浮动div

3 个答案: