Я делаю временную шкалу, в которой есть строки для каждой даты или диапазона дат с полосами для представления временных интервалов. Я решил, что получу количество дней между самой ранней и последней датами, а затем вычислю ширину и левое поле или каждую полосу даты в процентах (так что x% от общего времени будет шириной, а время между дата начала и самая ранняя дата, разделенная на общее время, будет процентным левым полем).
Я также хотел иметь вертикальную полосу, которая идет поверх всех других строк, показывающих текущую дату. Однако то, что у меня получилось, похоже, не работает.
Каждый раз, когда я меняю ширину экрана, полоса «текущей даты» не остается в том же относительном положении, что и другие полоски. Однако нормальные панели даты, похоже, работают правильно.
Есть ли лучший / более последовательный способ сделать это?
Вот jsfiddle с полными html и css вместе с классом для строки «текущая дата»:
https://jsfiddle.net/cLxw5atv/
.current-date-bar {
background-color: green;
height:110%;
width: 3px;
margin-left:35%;
position: absolute;
top: 0;
z-index:100;
}