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

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

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

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

最佳答案

我已经调整了您的原始笔并创建了my own。我改变了什么:


我为下拉菜单提供了一个带有dropdown-container类的容器,该容器可以控制屏幕尺寸变化时它们的组织方式。
我在display: flex类中添加了dropdown-container CSS属性。然后设置flex-flow: column来告诉容器在单个列中对这些元素进行排序。
当屏幕降到750px以下时,我将容器上的flex-flow属性更改为row,以便将下拉列表组织成一行。


如果您对flexbox不太了解,请this is the cheat sheet I always fall back on

10-04 19:43