#javascript #html #css
#javascript #HTML #css
Вопрос:
Я создаю приложение ежедневного расписания, которое показывает часы с 6:00 до 22:00 и поля, которые представляют временные интервалы (задачи, которые необходимо выполнить). Позиция блока представляет время выполнения задач — таким образом, поле с отметкой 14:00 (визуально) представляет задачу, которая начинается в 14:00. Продолжительность представлена длиной блоков (по высоте). Если вышеуказанное поле заканчивается в 15:00, продолжительность составляет 1 час.
Я создал div, который похож на столбец (см. Рисунок Ниже), и хочу заполнить его полями, каждое поле представляет задачу. допустим, у меня уже есть задача в базе данных на этот день, и я просто хочу ее загрузить (т. Е. Создать Вложенный div внутри столбца-div для представления этой задачи).
Вопрос в том, как мне разместить задачу в нужном месте внутри столбца-div, в зависимости от времени и продолжительности (которые я знаю). Это должно быть сделано относительно длины столбца-divs.
Я не хочу использовать абсолютную позицию, потому что я хочу, чтобы все изменялось динамически — если окно полноразмерное или меньше, положение высоты и длина должны меняться как для столбца- div, так и для вложенных divs.
У меня есть базовый шаблон, который создает столбец часов и визуальный div той же высоты. ссылка на демонстрационное изображение — https://imgur.com/a/1OgJjGR
ожидаемым результатом должен быть блок-подобный div внутри столбца div, начинающийся в нужное время (скажем, в 14:00, как в приведенном выше примере) и заканчивающийся на отметке 15:00.
Я просто хочу добавить, что я подумал о том, как рассчитать длину задачи-div (по высоте) в процентах от высоты всего coulmn-div. Это duration / 16 * 100 (из-за 16 часов в расписании с 6 до 22), что мне нужно знать, так это как расположить его вертикально внутри столбца-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;
}
Комментарии:
1. Что вы пробовали до сих пор? Напишите короткий пример кода, чтобы мы могли вам помочь.
2. Эй, я практически ничего не пробовал, потому что понятия не имел, как даже подойти к этому. Я посмотрел на flexbox, но не увидел способа позиционировать divs относительно родительского div
3. Для flexbox есть свойство order .
4. Привет, спасибо, но это не подходит для моей проблемы, потому что, насколько я понимаю, для этого требуется, чтобы элементы flex были смежными. И в моем случае, например, может быть только одна задача — и она должна находиться в определенном положении относительно своего часа (скажем, 14:00). Таким образом, порядок, насколько я понимаю, не решает эту проблему.