如何使用 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 的浮动

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

How can i achieve this layout using css? [Without Grid]

html

css

flexbox

responsive-design

web