Я пытаюсь создать горизонтальную шкалу времени, но я не уверен, что лучше всего организовать правильные раскладки событий. На данный момент это выглядит так:
<div id="events">
<div class="event" style="left:25; position:relative;" id="1">• Entry 1</div>
<div class="event" style="left:25; position:relative;" id="2">• Entry 2</div>
<div class="event" style="left:50; position:relative;" id="3">• Entry 3</div>
<div class="event" style="left:375; position:relative;" id="4">• Entry 4</div>
</div>
Я пытаюсь сделать позицию Entry 4
на самом верху (так как на этом пути нет div), но я не уверен, что это лучшее решение. Он также должен позволять перекрывать любое количество событий.
Большинство css-опций/плагинов jQuery, похоже, не предлагают решения, поскольку я знаю, что они в основном предназначены для гибких сеток, но это только должно быть гибким по вертикали и иметь фиксированные позиции по горизонтали, чтобы правильно выстраиваться с датами.
Очевидным первым шагом является position: absolute
и задание top: x
но как можно было бы проверить предыдущие записи, чтобы убедиться, что он не перекрывает более старую и длинную запись. Временная шкала проведет довольно много событий различной длины, поэтому она также не может быть слишком интенсивной.
Любые предложения для самого лучшего/простого способа сделать это?