html - 如何并排放置两个 div，第三个 div 与第二个对齐

我有两个并排的 div(div1 和 div2)，我想在 div2 下放置第三个 div(div3)。

我尝试向 div3 添加边距以尝试将其对齐，但 div1 宽度是动态的。我也试过将 div3 向右 float ，但内容太远，与 div2 的开头不一致，如上图所示

.row {
  display: flex;
}

.div1 {
  margin-right: 1em;
}

<div class="row">

  <div class="div1">
    <p> some content with unknown width</p>
  </div>

  <div class="div2">
    <p> some content </p>
  </div>

</div>

<div class="div3">
  <p> some content that should be under div2 </p>
</div>

默认行为是 div3 在 div1 下。我正在尝试将 div3 放在 div 2 下方

最佳答案

您可以使用以下方法执行此操作:

    .wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .div {
      flex-basis: 50%;
      min-height: 100px;
    }

    .div1 {
      background: red;
    }
    .div2 {
      background: blue;
    }
    .div3 {
      background: aqua;
    }

<div class="wrapper">
  <div class="div div1">div1</div>
  <div class="div div2">div2</div>
  <div class="div div3">div3</div>
</div>

这是一个 codepan

关于html - 如何并排放置两个 div，第三个 div 与第二个对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58153825/