css - 如何使用 CSS 将 3 列堆叠在顶部以创建 2 列

Question

我认为我的形象说明了我想在这里做什么，

请注意，我还需要第 1 列与第 2 列和第 3 列稍微重叠。

我还将在第 3 列中添加一些图像，这些图像需要与左边框对齐。（我不是在寻求帮助，只是说明以便您了解我应该使用哪些显示类型）

感谢人们！

我已经尝试过 Valds 方法，但不幸的是我无法满足我的需要。

我应该更明确一点，但我要求最左边的图像（第 1 列）始终与第 3 列的底部对齐。

标签： css

Answer 1

（这只是众多方法之一）

只需添加或删除结果类即可从布局 1 切换到布局 2

.columns {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.columns div {
  width: calc(100% / 3);
  display: flex;
  align-items: center;
  justify-content: center;
  background: lightgrey;
  height: 100px;
}
.outcome div:nth-child(2), .outcome div:nth-child(3) {
  width: calc(100% / 3 * 2);
}

<div class="columns">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

<div class="columns outcome">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>