html/css中的流程圖

有沒有不借助腳本或表創建流/游泳圖的一些好方法？我說的是顯示不同的主機發送數據包（X軸上的主機，Y上的時間和箭頭到目標主機）。它似乎有太多的表格元素（尤其是箭頭跨越多個列），但另一方面，divs很難在水平方向正確放置（他們必須基本對齊到指定的「列「）。html/css中的流程圖

有沒有什麼好的出路？任何助手框架？（我不想做帆布的東西，除非真的需要）

編輯：忘了補充爲什麼我根本沒有提到圖像 - 圖中的一些元素應該有：懸停動作，並應在將來點擊。

來源

2010-06-17 viraptor

我會建議使用帶透明alpha層的PNG文件（用於重疊），並用CSS絕對定位它們。我還沒有看到你的整體佈局，所以我不能說這是你的特定情況的最佳方法。對於圓形

示例CSS代碼如此：針對單個圓元件<a class="circle" id="myCircle" href="foo">Foo</a>

a.circle { 
    display:block; 
    height:100px; 
    width:100px; 
    background-image:url(/path/to/circle.png); 
    background-repeat:no-repeat; 
    position:absolute; 
    line-height:100px; 
    text-align:center; 
    }

代碼：

a#myCircle { 
    top:234px; 
    left:357px; 
}

類定義創建共享所有錨定元件的一組屬性班級「圈子」。然後將ID爲「myCircle」的錨點放置在座標爲234,357（從設置爲position:relative;的父元素的左上角開始）的像素中。

來源

2010-06-17 00:16:19

+1這比我計劃中的那個狡猾的解決方案更好。 – Jason 2010-06-17 00:17:22

或者非常簡單的方法：使整個流程圖成爲一個圖像... :-)。但是我猜測你需要動態組裝流程圖，也許還會在瀏覽器中移動元素。 – 2010-06-17 00:17:26

對不起 - 我沒有說我爲什麼完全跳過圖像。在未來的圖表中的元素應該是可點擊/可排序的/ ...現在我可以：只懸停，但我仍然希望能夠複製文本。 – viraptor 2010-06-17 00:32:27

html/css中的流程圖

回答

相關問題