交互式時間線的複雜CSS定位 - 浮點型還是絕對型，還是兩者兼而有之？

我創建了一個交互式時間表，其中每個事件都是一個包含HTML5數據標記的列表項，用於設置開始日期和結束日期。（見下圖）交互式時間線的複雜CSS定位 - 浮點型還是絕對型，還是兩者兼而有之？

<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的開頭利潤率左，你可以看到下面。

Timeline

這裏是我的真正的問題......我目前使用浮動：留在列表中的項目，但短期的，如該隱和亞伯，浮動對亞當列表項，而比跳到一條新的線路和正確的左側定位。這是有道理的，並應該漂浮在相鄰的元素是否有父元素的空間 - 但是，有沒有辦法使用浮動和絕對定位的組合來動態地對齊這些項目？

最終的時間線將有800多個活動，我需要他們很好地分享時間線空間，我不希望他們堆疊任何高於10個事件的高度。

任何幫助，或想法，非常感謝！

來源

2012-06-06 matthoiland

你有沒有考慮過使用HTML5 canvas元素呢？ – Neil

好主意是使用畫布 - 例如： - http://everytimezone.com/ –

你真的需要很多複雜的JavaScript才能使它正常工作。你需要計算每個以前的盒子的位置，然後讓jquery把下一個盒子放在一個位置，這樣它就不會和以前的盒子發生衝突。使用position:absolute，但有JavaScript計算它應該去的地方。根據你計算它放置的位置，使用jquery爲每個li分配一個top和left值。 CSS浮動將無法做到你想要的，在這種情況下根本不使用它。

來源

2012-06-06 18:03:37

這就是我擔心的。有關如何做到這一點的任何想法？在設置頂部和左側定位之前，如何保存陣列中的每個盒子位置並對陣列進行測試？ – matthoiland

也許有一個'lines'數組，你可以根據你放置它們的行來對添加的塊進行排序。然後先讓系統測試'lines [0]'，如果沒有空間，那麼繼續下一行。這會使您使用盡可能少的行數。要測試某一行上的可用空間，只需檢查該行上的每個框，以查看它們是否與要添加的空間重疊。 –

絕妙的主意！謝謝。 – matthoiland

除非您需要多於一個出現在同一行上，否則您可能不需要將它們浮動。除非這些條應該與另一個或其他內容重疊，否則您可能不需要CSS定位。

聽起來好像你只需要讓li標籤是未浮動的塊級元素，並根據需要爲每個元素設置一個餘量。

來源

2012-06-06 17:43:16

你可以用你的，你在span或p或任何你喜歡的文本，然後應用任何javascript給他們，並給你的空間的li全寬。這將不需要0或absolute positioning。

來源

2012-06-06 19:20:54 maksbd19

交互式時間線的複雜CSS定位 - 浮點型還是絕對型，還是兩者兼而有之？

回答

相關問題