如何使用 css 实现这种布局？ [无网格]

Question

我有以下布局。

当我将屏幕尺寸缩小时，蓝色框将显示在下一行。但它的位置就在红框结束的地方的正下方。目前，我无法将蓝色框定位到起始位置。我如何在不使用 Grid 的情况下实现这一点 ->

这是我的 html 和 css -

  <div class="order-confirmation">
    <div class="confirmation-body-area">
      <div class="box box-1">Box 1</div>
      <div class="box box-2">Box 2</div>
      <div class="box box-3">Box 3</div>
    </div>
  </div>

.order-confirmation {
    .confirmation-body-area {
      width: 90%;
      margin: auto;
      .box {
        display: inline-block;
      }
      .box-1 {
        background: red;
        height: 214px;
        width: 631px;
        float: left;
      }
      .box-2 {
        background: blue;
        height: 214px;
        width: 427px;
        float: right;
      }
      .box-3 {
        background: yellow;
        height: 214px;
        width: 631px;
        clear: both;
      }
    }
  }

Answer 1

由于浮动，它对齐到第一个末尾。尝试删除框 1 和框 2 的浮动