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

Question

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

我已经放置了一个 codepen 来帮助我尝试做的事情。 对于初学者，我没有对这个站点进行硬编码，而是在 Webflow 中完成的，Webflow 是用于构建网站的一些交互式界面，然后我提取了 HTML 代码。当然这并不理想……但无论如何，我在这里。

当屏幕分辨率发生变化时，“非洲”下的下拉菜单会堆叠，而“亚洲”下的下拉菜单则不会(我试图编写代码以在不同分辨率下堆叠)。前者由 Webflow 的“下拉”小部件输入，但我发现它们非常繁琐，只想手动硬编码我的输入。我已经尝试了一段时间来尝试模仿 Africa 下下拉菜单的代码(与 @media 位有关？)但出于某种原因，无论我多么努力，我都无法将它们堆叠起来。有人可以提供解决方案吗？

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

Answer 1

我调整了你原来的笔并创建了 my own .我改变了什么:

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

• 我向 dropdown-container 类添加了一个 display:flex CSS 属性。我设置了 flex-flow: column 来告诉容器将这些元素排列在一个列中。

• 当屏幕低于 750 像素时，我将容器上的 flex-flow 属性更改为 row，这样下拉菜单就会组织成一行.

如果你不太了解 flexbox，this is the cheat sheet I always fall back on .