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

Question

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

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

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

Answer 1

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

我为下拉菜单提供了一个 class 为 dropdown-container 的容器，可以控制它们在屏幕尺寸变化时的组织方式。
我在dropdown-containerclass中添加了display: flexCSS属性。我设置 flex-flow: column 来告诉容器将这些元素排列在一个列中。
当屏幕低于 750px 时，我将容器上的 flex-flow 属性更改为 row，这样下拉菜单就会组织成一行.

如果你对 flexbox 了解不多，this is the cheat sheet I always fall back on。

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

Different Div Alignments on Different Resolution

html

css

stack

resolution