交互式时间轴的复杂CSS定位 - 浮动，或绝对，还是两者？

Question

我正在创建一个交互式时间轴，其中每个事件都是一个包含HTML5数据标记的列表项，用于设置开始日期和结束日期。 （见下文）

<ul>
    <li data-start="-4181" data-end="-3251">Adam</li>
    <li data-start="-4173" data-end="-4117">Cain</li>
    <li data-start="-4163" data-end="-4125">Abel</li>
    <li data-start="-4051" data-end="-3139">Seth</li>
    <li data-start="-3946" data-end="-3041">Enos</li>
</ul>

我正在使用jQuery来正确设置每个事件的宽度，并从父div的开头开始留下一个边距，如下所示。

这是我真正的问题......我目前正在使用浮动：左侧列表项目，但是短暂的，如Cain和Abel，浮动在Adam的列表项目上，而不是跳到新行并在左侧正确定位。这是有道理的，并且应该浮动相邻元素是父元素中有空间 - 但是，有没有办法使用浮动和绝对定位的组合来动态对齐这些项？

最终时间线将有800多个事件，我需要它们很好地分享时间线空间我并不希望它们堆叠任何高于10个事件的事件。

非常感谢任何帮助或想法！

Answer 1

除非你需要不止一个出现在同一行，否则你可能不需要浮动它们。除非条形图彼此重叠或与其他内容重叠，否则您可能不需要CSS定位。

听起来你只需要允许li标签是不带状态的块级元素，并根据需要为每个元素设置边距。

Answer 2

你真的需要很多复杂的JavaScript才能使它正常工作。你需要计算每个前一个框的位置，然后让jquery将下一个框放在一个位置，这样它就不会与之前的框冲突。使用position:absolute，但让javascript计算应该去哪里。使用基于关闭计算位置的jquery为每个li分配top和left值。 CSS float将无法执行您想要的操作，在这种情况下根本不使用它。

Answer 3

您可以将自己的文字包裹在span或p或任何您喜欢的内容中，然后将javascript应用于li，并为floating提供全宽的空间。这不需要absolute positioning或{{1}}。