html - 流动 DIV，以便它们使用可用空间而不是仅仅堆叠

Question

我有四个 div。

div 2 是 div 1 高度的一半，div 3 & 4 是 div 2 高度的一半。

在大显示器上 div 的位置很好:

---------------- ---------- -------- --------
|              | |  Div 2 | | Div 3| | Div 4 |
|    Div 1     | |________|  -------  -------
|              | 
|              |
----------------

在较小的屏幕上我想要以下布局:

---------------- ----------
|              | |  Div 2 |
|    Div 1     | |________|
|              | |  Div 3 |
|              | ----------
---------------- | Div 4  |

即div 3 和 4 位于 div 2 下。

但是它们被放置在 div 1 下:

---------------- ----------
|              | |  Div 2 |
|    Div 1     | |________|
|              | 
|              |
----------------
-------- --------
| Div 3| | Div 4 |
 -------  -------

是否有可能以某种方式获得第二种选择？在我自己的尝试中，我从来没有同时获得大屏幕和小屏幕的替代方案来使用相同的代码。

Answer 1

您可以使用 CSS 属性 flexbox ( MDN reference ) 来实现这一点。请参阅下面的示例(全屏并拉伸(stretch)屏幕)。

在启动移动优先时，您可以逐步设置 media queries ，您可以轻松修改框的视觉层次结构。首先，将 display: flex; 放在包装器 div 上，然后在所需的断点(此处为 480px)上添加另一个 display : flex; 在 .inner-wrapper 上。

注意:这只是一个快速设置，有很多方法可以做到这一点。

.wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
}

.inner-wrapper {
  width: 50%;
}

.box-large {
  width: 50%;
  height: 50%;
}

.box {
  width: 100%;
  height: 25%;
}

.box-small {
  width: 100%;
  height: 12.5%;
}

@media screen and (min-width: 480px) {
  .inner-wrapper {
    display: flex;
  }
}

/* Visual stuff */

body {
  margin: 0;
  padding: 0;
}

.box-one {
  background-color: red;
}

.box-two {
  background-color: blue;
}

.box-three {
  background-color: green;
}

.box-four {
  background-color: yellow;
}

<div class="wrapper">
  <div class="box-one box-large">red</div>
  <div class="inner-wrapper">
    <div class="box-two box">blue</div>
    <div class="box-three box-small">green</div>
    <div class="box-four box-small">yellow</div>
  </div>

</div>