垂直CSS日程表布局问题

Question

我正在创建一个垂直的CSS时间线。我将元素左右浮动，以便它们与每列一起堆叠。这基本上是有效的，但我注意到在几个元素之后，出现了一个很大的缺口

查看以下代码笔。在第5个元素之后，左手边出现了一个大的间隙，这与之前的间隙不一致，并且在几个元素之后再次出现。是什么原因造成的？

请注意，生成的HTML是从Angular 生成的

<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的工作方式：它不会将项目浮动到比上一个元素更高的位置！请参见示例。

这是好的，因为这意味着当你在段落旁边浮动图像时，例如，它不会一直浮动到页面顶部，而是停留在段落旁边，这就是你想要的！在时间线的情况下，这意味着所有列表元素实际上都是按顺序出现的，沿着页面往下看——否则一个高项目会导致更小、更晚的项目出现在时间线中的更早位置——这有点违背直觉。

为了使时间线看起来更好，您可以使用javascript或项目生成代码来确定左列还是右列更短，并将每个项目动态添加到当前最短的列中，而不是简单地左右交替。