div中的两个浮动div答案

【问题标题】：Two floating divs in divdiv中的两个浮动div
【发布时间】：2019-02-26 23:12:09
【问题描述】：

我有一个div 和两个divs 在这个主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>

【问题讨论】：

标签： html css layout flexbox responsive-design

【解决方案1】：

div.footban {
    display: flex;
}

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

当您调整窗口大小时，您可以设置一些对浏览器窗口的特定大小生效的媒体查询并将flex-direction 重置为column，这将使div.footban 的每个直接子级对齐垂直，第二个 div 将在第一个之下

// I use 768px just for sample purpose

@media all and (min-width : 768px) {
    div.footban {
        flex-direction: column;
    }
}

【讨论】：

【解决方案2】：

您也可以使用@media 查询

只需添加display: block

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

【讨论】：

【解决方案3】：

您所要做的就是将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>

【讨论】：

@Jirin 如果我的回答解决了您的问题，请点击我的回答旁边的灰色复选标记接受，谢谢！