Html 如何使用此顺序使4个div向左浮动，一个div向右浮动？

我想让这5个div左右浮动，顺序如下：

14

2 4

34

5.4

仅当屏幕宽度大于600px且小于1024px时。 div 4的高度等于所有其他div的高度，如果屏幕宽度小于600px，我希望将它们一个接一个地显示，如下所示：

一,

二,

三,

四,

五,

下面是我的示例代码：

<div class=group>
  <div class="block one">Block One Left</div>
  <div class="block two">Block Two Left</div>
  <div class="block three">Block Three Left</div>
  <div class="block four">Block Four right</div>
  <div class="block five">Block Five Left</div>
</div>

和一个代码笔来说明这种情况：

---

关于如何实现这一点，您有什么想法吗？

如果您知道元素的宽度，您可以始终将其定位为绝对位置（确保相对定位容器）

要仅在设备宽度小于600px时执行此操作，请执行以下操作：

@media screen and (max-width: 600px) { 
    .four {
      height: 160px;
      position: absolute;
      left: 220px;
      top: -5px;
    }
}

注意，我也在块上使用了flex来对齐它们，但这可以使用显示块来完成

---

这可能会有所帮助。我在中屏幕上使用了第四个div的位置

---

根据结构的其他部分，您可以使用右键创建。四个绝对位置：0；分辨率更改后，可以删除绝对位置。块元素可以有显示：块；正如@armin发布的，您可以使用right:0；而不是离开。谢谢，我想它会有用的。在第一个代码笔中，四个div与第一个不对齐，而是与五个对齐。对吗？你也可以添加top:0；如果您希望它在相对容器的顶部对齐，对于我来说，它在顶部对齐？我添加了“top:0；”以确保您也能做到这一点。请注意，第二支代码笔上有媒体查询功能，仅用于设置最大宽度为600px的样式；另外，我如何独立于屏幕的宽度将两个圆孔居中？保证金：0自动将无法工作，因为绝对定位权？

@media screen and (max-width: 600px) { 
    .four {
      height: 160px;
      position: absolute;
      left: 220px;
      top: -5px;
    }
}

@media screen and (min-width: 600px) and (max-width: 1024px) {
  .group > * {
    display: block;
    background: red;
  }
  .four {
    float: right;
    position: absolute;
    left: 220px;
    top: 0;
  }
}
@media screen and (max-width: 600px) {
   .group > * {
    display: block;
  }
   .four {
    float: initial;
    position: initial;
    left: initial;
    top: initial;
  }
}