如何在类列div中创建浮动任务框—

如何在类列div中创建浮动任务框——日程管理应用开发

阿华AIGC实验室

2026-5-12

实现动态自适应的任务框垂直定位（无绝对定位）

针对你的日程管理应用需求，不用绝对定位也能完美实现任务框的动态位置与高度适配——核心思路是利用CSS百分比单位相对于父元素尺寸的特性，结合Django模板的动态计算来生成任务样式。以下是具体实现步骤：

1. 计算任务框的垂直偏移百分比

任务的垂直偏移（距离tasks-div顶部的距离）需要基于任务开始时间与日程起始时间（6:00）的差值来计算：

先算出任务开始时间比6:00晚了多少小时：start_hour - 6（比如14:00开始的话，就是14-6=8小时）
再用这个偏移小时数除以总日程时长（16小时），乘以100%得到百分比：((start_hour - 6) / 16) * 100%

这个百分比值可以直接作为任务框的margin-top（更推荐用margin-top，避免影响任务框内部布局），因为百分比单位是相对于父元素（tasks-div）的高度计算的，窗口大小变化时会自动同步调整。

2. Django模板中动态渲染任务元素

你已经获取了当日任务数据，只需在tasks-div里循环渲染任务div，同时把计算好的样式动态绑定上去：

更新后的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">
    {% for task in daily_tasks %}
      <!-- 计算偏移和高度的百分比 -->
      {% with offset_hours=task.start_hour|add:-6 %}
        {% with top_percent=offset_hours|div:16|mul:100 %}
          {% with height_percent=task.duration|div:16|mul:100 %}
            <div class="task-box" style="margin-top: {{ top_percent }}%; height: {{ height_percent }}%;">
              {{ task.title }}
            </div>
          {% endwith %}
        {% endwith %}
      {% endwith %}
    {% endfor %}
  </div>
</div>

注意：如果你的任务开始时间包含分钟（比如14:30），需要在Django视图层把时间转换成小时浮点数（比如hour + minute/60），再传递到模板中，这样偏移百分比会更精准。

3. 补充任务框的CSS样式

为了让任务框正确显示，需要给.task-box添加基础样式，确保它在流式布局中保持正确形态：

#tasks-div {
  background-color: #606060;
  border: 1px solid #ddd;
  flex: 1;
  overflow-y: auto; /* 任务过多时添加滚动条 */
}

.task-box {
  background-color: #4CAF50;
  margin-bottom: 0; /* 避免默认margin影响布局 */
  padding: 4px;
  box-sizing: border-box; /* 确保padding不会增加任务框总高度 */
  color: white;
  font-size: 12px;
  border-radius: 4px;
}