使用css創建水平樹

我有一個數組，我使用它填充族譜。這是爲了這樣的：使用css創建水平樹

--------- 3

---- 1

-------- 4

-------- 5

---- 2

-------- 6

等...一個例子是http://bullybloodlines.net/dogdetails.php?name=muscletone%27s+lucky+bam+bam+of+power+line+bullys

我這個代碼是：

<?php 
$generations = 4; 
$genTableArray = array(); 
for($genCol = 0; $genCol <= $generations; $genCol++) 
{ 
    $genRowCount = pow(2, $genCol); 
    $rowspan = pow(2, $generations)/$genRowCount; 

    for($familyGenCount=0; $familyGenCount<$genRowCount; $familyGenCount++) 
    { 
     $personIndex = pow(2, $genCol) + $familyGenCount - 1; 
     $rowIndex = $rowspan * $familyGenCount; 
     $encodedog = urlencode($dogarr[$personIndex]); 
     $genTableArray[$rowIndex][] = "<td rowspan='{$rowspan}'><a href='http://bullybloodlines.net/dogdetails.php?name={$encodedog}'><img src='images/dogpics/{$dogpic[$personIndex]}' width=100/><br><br>{$dogarr[$personIndex]}</a></td>\n"; 
    } 
} 

ksort($genTableArray); 
$familyTreeHTML = ''; 
foreach($genTableArray as $rowData) 
{ 
    $familyTreeHTML .= "<tr>\n" . implode("\n", $rowData) . "</tr>\n"; 
} 
?> 


<table border='1' align='center' cellpadding='4' style='border-collapse:collapse;'> 
    <?php echo $familyTreeHTML; ?> 
</table>

這工作得很好。不過，我的目標是改變佈局並使用CSS創建類似http://thecodeplayer.com/walkthrough/css3-family-tree的東西，但像我的表一樣是水平的。

香港專業教育學院嘗試添加此的CSS旋轉它：

.tree{ 
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
transform: rotate(-90deg); 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE6, IE7 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)" /* IE8 */ 
-ms-transform: rotate(-90deg); 
}

它旋轉，但文本顯示橫盤整理爲好。這是我的第一個問題。我也遇到了麻煩，使用我的數組來填充它的排列方式。「css3-family」樹使用嵌套列表。任何幫助將不勝感激。謝謝。

來源

2013-07-28 coyne1981

有沒有你認爲你應該「使用CSS」，而不是表中的特別的原因？從語義上講，沒有其他標籤可以表達祖先/後代與表格之間的關係。請注意，您正在查看的項目僅支持一位家長。 – cimmanon

僅僅因爲我希望它看起來更好。 HTML表格似乎成爲美學上令人愉悅的負擔。 – coyne1981

通過CSS增強元素的外觀不限於非表格元素。如果你對背景圖像有創意，你可以做很多事情：http://cssdeck.com/labs/niw9pvpw – cimmanon

不知道我得到它的權利，但你可以從樹上旋轉內部元素以獲得所需的方向。

所以，如果你這樣做：

.tree{ 
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
transform: rotate(-90deg);  
-ms-transform: rotate(-90deg); 
}

您可以添加：

.tree a { 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    transform: rotate(90deg);   
    -ms-transform: rotate(90deg); 
    }

要解決內部錨定位。

來源

2013-07-29 07:39:17 HubuN

我確實取得了進展，但是節點之間的界線顯示不正確。我嘗試了一些無用的東西。我認爲唯一的方法是使用圖像的html表格，使其看起來不錯。：/ – coyne1981

這是一個由培文露超過codepen，你應該檢查了一個很棒的例子。

Sheer awesomeness

來源

2013-08-25 23:53:07

使用css創建水平樹

回答

相關問題