不同分辨率下的不同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不太了解，那么這就是我經常回想的備忘單 。