将 div 垂直对齐到另一个 div（不在内部）

Question

我有设计要求将一个div与另一个div对齐，如下图所示

• 框 1：动态高度和宽度
• 框 2 和 4：动态高度和固定宽度
• 框 3：固定宽度和高度
• 框 1 和框 3 应彼此垂直对齐

我已经尝试过使用 css grid，但它不能满足要求。也许任何人都可以解决这个问题？谢谢

Answer 1

你的意思是这样的吗？

HTML：

<div class="row">
    <div class="col">
      <div id="box-1" class="box">1</div>
    </div>
    <div class="col">
      <div id="box-2" class="box">2</div>
      <div id="box-3" class="box">3</div>
      <div id="box-4" class="box">4</div>
    </div>
</div>

CSS：

.row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.box {
  border: solid 1px #000;
  padding: 10px;
}

#box-2,
#box-4 {
  width: 200px;
}

#box-3 {
  width: 200px;
  height: 100px;
}

https://codepen.io/mickeyuk/pen/zYbzJzO