如何将div放在彼此的顶部水平对齐

要将div放在彼此的顶部水平对齐，可以使用CSS的flexbox布局或者grid布局来实现。

使用flexbox布局：

在父容器上设置display为flex，这样子元素会自动排列在一行上。
设置align-items为flex-start，这样子元素会在父容器的顶部对齐。

示例代码：

<style>
    .container {
        display: flex;
        align-items: flex-start;
    }
</style>

<div class="container">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
</div>

使用grid布局：

在父容器上设置display为grid，这样子元素会以网格形式排列。
设置align-items为start，这样子元素会在父容器的顶部对齐。

示例代码：

<style>
    .container {
        display: grid;
        align-items: start;
    }
</style>

<div class="container">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
</div>

以上两种方法都可以实现将div放在彼此的顶部水平对齐。在实际开发中，可以根据具体需求选择使用哪种布局方式。