1

我正在创建一个交互式时间线，其中每个事件都是一个带有 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 开头的左边距，如下所示。

时间线

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

最终的时间线将包含 800 多个事件，我需要它们很好地共享时间线空间，并且我不希望它们堆叠的高度超过 10 个事件。

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

4

3 回答 3

1

除非您需要多个它们出现在同一行，否则您可能不需要浮动它们。除非这些条应该相互重叠或与其他内容重叠，否则您可能不需要 CSS 定位。

听起来您只需要允许 li 标签是非浮动块级元素，并根据需要为每个标签设置一个边距。

于 2012-06-06T17:43:16.713 回答
1

您确实需要大量复杂的 JavaScript 才能使其正常工作。您需要计算每个前一个框的位置，然后让 jquery 将下一个框放在一个位置，这样它就不会与任何以前的框冲突。使用position:absolute但让 javascript 计算它应该去哪里。根据您计算要放置的位置，使用 jquery分配每个 li atop和值。leftCSS float 将无法做你想做的事，在这种情况下根本不要使用它。

于 2012-06-06T18:03:37.617 回答
0

您可以将您的文本包装在 a spanorp或您喜欢的任何内容中，然后将任何内容javascript应用于它们并提供li整个空间的宽度。这不需要floating或absolute positioning。

于 2012-06-06T19:20:54.163 回答