html - 我怎样才能并排放置两个div，第三个div与第二个对齐

Question

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

我已经尝试向 div3 添加边距以尝试将其对齐，但 div1 宽度是动态的。我也尝试过将 div3 向右浮动，但是内容太远并且没有像上图那样与 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 下面

Answer 1

您可以通过以下方式做到这一点:

    .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