4

我有一个用来填充家谱表的数组。它的顺序是这样的：

---------3

----1

--------4

0

--------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”树使用嵌套列表。任何帮助将不胜感激。谢谢你。

4

3 回答 3

4

Peiwen Lu 在codepen上有一个很棒的例子，你应该看看。

纯粹的敬畏

于 2013-08-25T23:53:07.820 回答
1

一个很老的问题，但我对水平 CSS-only 树的搜索仍然把我带到了这里。我没有找到任何解决方案，所以我不得不自己解决。

如果你也更喜欢 CSS3 家族树代码而不是 Emmanuel 提到的水平树（不幸的是固定宽度），那么你可能会喜欢我基于它的 codepen 。我需要根在右边，这有点难。

在此处输入图像描述

基本上，我已经手动将所有边距/填充顺时针旋转了一步（逆时针）。例如，而不是：

.tree li::before, .tree li::after{
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 1px solid #ccc;
    width: 50%; height: 20px;
}

你应该写

.tree li::before, .tree li::after{
    content: '';
    position: absolute; left: 0; bottom: 50%;
    border-left: 1px solid #ccc;
    width: 20px; height: 50%;
}

或（从右到左），

.tree li::before, .tree li::after{
    content: '';
    position: absolute; right: 0; bottom: 50%;
    border-right: 1px solid #ccc;
    width: 20px; height: 50%;
}

对于从右到左的树，我还必须设置direction: rtl.

于 2019-10-21T07:00:06.677 回答
0

不确定我是否正确，但您可以将内部元素从树上旋转以获得所需的方向。

所以如果你这样做：

.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-29T07:39:17.677 回答