html - 如何使 div 响应并垂直堆叠它们？

Question

我想让 2 个 div 响应，所以当使用移动设备时，2 个内部 div 将垂直堆叠，一个在另一个之上.

我有 div 的 HTML(无响应)，但我不知道我需要用 CSS 做什么才能使它们响应:

<div style="width: 100%; overflow: hidden;">
    <div style="width: 50%; float: left;"> Left </div>
    <div style="margin-left: 50%;"> Right </div>
</div>

我有一个 JSfiddle here .

Answer 1

你可以使用 flexbox:

#wrapper {
  display: flex;    /* Magic begins */
  flex-wrap: wrap;  /* Allow multiple lines */
}
#wrapper > div {
  flex: 1;          /* Distribute space equally among the flex items */
  min-width: 300px; /* But force them to be at least300px wide */
  border: 1px solid;
}

<div id="wrapper">
  <div>Left</div>
  <div>Right</div>
</div>