Вертикальная временная шкала временной шкалы

Question

Я создаю вертикальную временную шкалу CSS. Я плаваю элементы влево и вправо, чтобы они складывались с каждым столбцом. Это в основном работает, но я заметил, что после нескольких элементов появляется большой зазор

Посмотрите на следующие codepen. После 5-го элемента с левой стороны появляется большой зазор, который не согласуется с предыдущими пробелами, и снова после нескольких элементов. Чем это вызвано?

Обратите внимание, что полученный HTML был произведен из Угловая

<ul class="timeline ng-scope"> 
    <li class="year first">July 2015</li> 
    <li class="event highlightedSection ng-scope" ng-repeat="activity in activities"> 
     <span class="itemPoint"></span> 

     <span class="time ng-binding">2 minutes</span> 
     <div ng-if="activity.ContentType != 1" class="message ng-binding ng-scope">Device connected</div> 
    </li> 
</ul> 

Answer 1

Основной причиной является то, как float работы: он не будет плавать элемент в позиции выше, чем предыдущий элемент! See an example.

Это хорошо, потому что это означает, что, когда вы плавающее изображение рядом с пунктом, например, это будет не просто плавать вплоть до верхней части страницы, но остаться рядом с пунктом , где вам это нужно! А в случае вашей временной шкалы это означает, что все элементы списка фактически отображаются по порядку, опускается вниз, иначе один высокий элемент будет приводить к меньшим, более поздним элементам, появляющимся ранее на временной шкале, - что было бы немного контр-интуитивным ,

Что бы вы могли сделать, чтобы сделать временную шкалу лучше, использовать либо javascript, либо код вашего элемента, чтобы выяснить, является ли левый или правый столбцы короче и динамически добавлять каждый элемент к текущему кратчайшему вместо простого чередования слева и справа.