Javascript 如何创建浮动'；盒子'；在类似div的列中-每日计划应用程序

我正在创建一个daily schedule应用程序，它显示从6:00到22:00的小时数和表示时间段（要完成的任务）的方框。方框位置表示任务时间-因此14:00标记处的方框（视觉上）表示14:00开始的任务。 持续时间由框的长度（高度）表示。如果上述方框在15:00结束，则持续时间为1小时

我创建了一个类似于列的div（见下图），并希望用方框填充它，每个方框代表一个任务。 假设我那天在数据库中已经有一个任务，只想加载它（即在列div中创建一个嵌套div来表示该任务）

问题是-关于任务的时间和持续时间（我知道），如何将任务放置在列div中的正确位置。它应该与列divs长度相对应。

我不想使用绝对位置，因为我希望所有内容都能动态调整大小-如果窗口为全尺寸或更小，则列div和嵌套div的高度位置和长度都应该不同

我有一个基本模板，它创建了一列小时和一个高度相同的可视div。 链接到演示图像-

预期结果应该是div列中的一个长方体状div，从正确的时间开始（根据上面的示例，假设为14:00），到15:00结束

我只想补充一点，我已经考虑过如何计算任务div的长度（高度方面）占整个coulmn div高度的百分比。持续时间/16*100（因为日程安排中从6到22的16小时） 我需要知道的是如何在column-div中垂直定位它

代码： 在django（python）中运行

html（相关部分）：

---

到目前为止你都试了些什么？编写简短的示例代码，以便我们能够帮助您。嘿，我还没有尝试任何实际操作，因为我甚至不知道如何实现这一点。我看过flexbox，但没有找到相对于父div定位div的方法flexbox有属性。嘿，谢谢，但它不适合我的问题，因为据我所知，它要求flex元素相邻。在我的例子中，只能有一个任务，它需要在一个特定的位置，相对于它的时间（比如说14:00）。因此，据我理解，该命令并不能解决这个问题。

    <div id="schedule-div">
            <div id="table-div">
                <table id='schedule-table'>
                    <th>Hour</th>
                    {% for n in hours %}
                        <tr>
                            <td>{{ n }}</td>
                        </tr>
                    {% endfor %}
                </table>
            </div>
            <div id="tasks-div"></div>
        </div>

#schedule-div {
    display: flex;
    width: 30%;
    margin: 40px auto 0 auto;
    border: 1px solid #ddd;
}

#tasks-div {
    background-color: #606060;
    border: 1px solid #ddd;
    flex: 1;
}

#schedule-table {
    font-family: "Trebuchet MS";
    border-collapse: collapse;
    flex: 1;
}