垂直CSS時間軸布局問題

Question

我正在創建一個垂直CSS時間軸。 我左右浮動元素，以便它們與每一列堆疊。 這通常有效，但是我注意到在一些要素之后出現了很大的差距

看下面的codepen 。 在第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或您的商品生成代碼來找出左側或右側的欄目是否較短，然后將每個項目動態添加到當前最短的欄目中，而不是簡單地左右交替。