垂直CSS时间线版面问题
垂直CSS时间线版面问题
提问于 2015-06-25 04:31:20
我正在创建一个垂直CSS时间线。我向左和向右浮动元素，以便它们与每一列叠在一起。这主要是可行的，但我注意到，在一些元素之后，出现了很大的差距。
请看下面的码页。在第五个元素之后，左手边出现了一个很大的空隙，这与以前的间隙不一致，再过几个元素之后。是什么引起的？
请注意，生成的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> 回答 1
Stack Overflow用户
发布于 2015-06-25 05:39:54
基本原因是float的工作方式:它不会将一个项浮动到高于前一个元素的位置！看一个例子。
这很好，因为它意味着当你在段落旁边浮动一个图像时，它不会一直漂浮到页面的顶部，而是停留在段落旁边，这就是你想要的地方！就你的时间线而言，这意味着所有的列表元素都会按顺序出现，沿着页面向下移动--否则一个高的项目会导致更小、更晚的项目出现在时间线的早期--这会有点违背直觉。
为了使时间轴看起来更好，您可以做的是使用javascript或项目生成代码来确定左列还是右列是短的，并动态地将每一项添加到当前最短的列中，而不是简单地交替左和右。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31050478
复制相关文章
相似问题
腾讯云开发者
