Question

我正在创建一个日程安排应用程序，其中显示了从6:00到22:00的小时数，以及代表时隙（要完成的任务）的框。框的位置表示任务时间-因此，在14:00标记处的框（可视化）表示从14:00开始的任务。持续时间由框的长度（高度）表示。如果以上方框在15:00结束，则持续时间为1小时。

我创建了一个像列一样的div（请参见下图），并希望用框填充它，每个框代表一个任务。可以说我那天已经在数据库中有一个任务，只想加载它（即在column-div中创建一个嵌套的div来代表该任务）。

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

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

我有一个基本模板，该模板创建一小时的时间列和一个高度相同的可视div。链接到演示图像-https://imgur.com/a/1OgJjGR

预期结果应该是列div内的框形div，从正确的时间开始（如上例所示为14:00），并在15:00时结束。

我只想补充一点，我已经考虑过如何以整个库仑高度的百分比来计算task-div的长度（高度）。持续时间/ 16 * 100（因为计划中的16小时从6到22）我需要知道的是如何将其垂直放置在column-div内。

代码：在Django（python）中运行

html（相关部分）：

    <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>

css（相关部分）：


#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;
}

如何在类似列的div中创建浮动“框”-每日计划应用

0 个答案: