如何在不同高度的div中垂直放置4个盒子？

在不同高度的div中垂直放置4个盒子，可以使用CSS的flexbox布局来实现。具体步骤如下：

创建一个父容器div，并设置其display属性为flex，这样子元素会按照一行排列。
在父容器div中创建4个子元素盒子，分别表示要放置的4个盒子。
设置父容器div的align-items属性为center，这样子元素盒子会在垂直方向上居中对齐。
设置父容器div的justify-content属性为space-between，这样子元素盒子会在水平方向上均匀分布。
如果需要调整子元素盒子的间距，可以使用父容器div的margin属性来控制。

以下是一个示例代码：

<style>
    .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 400px; /* 设置父容器div的高度 */
    }

    .box {
        width: 100px;
        height: 100px;
        background-color: #ccc;
    }
</style>

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

这样就可以在不同高度的div中垂直放置4个盒子了。对于更复杂的布局需求，可以根据具体情况进行调整和扩展。