不同分辨率下的不同Div对齐

Question

http://codepen.io/jiselllla/pen/MJzRjV

我放了一个Codepen来帮助我尝试做的事情。 首先，我没有对该网站进行硬编码，而是在Webflow（它是构建网站的一些交互界面）中进行的，然后提取了HTML代码。 当然这不是理想的……但是无论如何，我在这里。

当屏幕分辨率更改时，“非洲”下的下拉列表会堆叠，而“亚洲”下的下拉列表则不会（我尝试编写代码以堆叠@不同的分辨率）。 前者是通过Webflow的“下拉”小部件输入的，但是我发现它们非常繁琐，并且只想手动进行硬编码。 我尝试了一段时间尝试模仿非洲下的下拉菜单代码（与@media位有关？），但是由于某种原因，无论我怎么努力，我都无法将它们堆叠起来。 有人可以提供解决方案吗？

.dropdown{
  position: relative;
  display: inline-block;
  font-family: Bitter, serif;
  font-size: 18px;
}

Answer 1

我已经调整了您的原始笔并创建了我自己的笔。 我改变了什么：

• 我为下拉菜单提供了一个带有一类dropdown-container ，该dropdown-container可以控制屏幕尺寸变化时它们的组织方式。

• 我在dropdown-container类中添加了display: flex CSS属性。 然后设置flex-flow: column以告知容器在单个列中对这些元素进行排序。

• 当屏幕降到750px以下时，我将容器上的flex-flow属性更改为row以便将下拉列表组织为一行。

如果您对flexbox不太了解，那么这就是我经常回想的备忘单 。