html - 如何使 3 个元素与左侧的第一个、右上角的第二个和右下角的第三个元素对齐？

Question

我有以下 html。 <div><item1><item2><item3><div> .这些元素是 div秒。我希望这些元素显示在两列中。 item2 单独位于左列中。在右列中，item1 与顶部对齐，item3 与底部对齐。 这是布局

我如何使用 flexbox 或 float 做到这一点？

Answer 1

您可以使用 flexbox 和 float 来实现，但我可能会为此使用 css-grid。

这样您甚至可以保留当前订单。

.wrapper {
  display: grid;
  grid-template-rows: 1fr 1fr;  /*you can use px, %, auto etc. here*/
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "left-item right-top" "left-item right-bottom";
  
  width: 500px;
  height: 200px;
}

.item2 {
  grid-area: left-item;
  
  background-color: blue;
}

.item1 {
  grid-area: right-top;
  
  background-color: red;
}

.item3 {
  grid-area: right-bottom;
  
  background-color: green;
}

<div class="wrapper">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
</div>

不过，我会考虑制作一个不带 css-grid 的(移动)版本作为后备，但由于您现在的布局，我认为它无论如何都适用于台式机/平板电脑？