creating horizontal tree with css

问题

I have an array that i populate a genealogy table with. It is in order like this:

---------3

----1

--------4

--------5

----2

--------6

and so on... an example is http://bullybloodlines.net/dogdetails.php?name=muscletone%27s+lucky+bam+bam+of+power+line+bullys

my code for this is:

<?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>

This works fine. However, my goal is to change the layout and use CSS to create something like, http://thecodeplayer.com/walkthrough/css3-family-tree but horizontal like my table is.

Ive tried adding this to the css to rotate it:

.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);
}

It does rotate but text is displayed sideways as well. That is my first issue. I am also having trouble using my array to populate this with the way it is arranged. The "css3-family" tree uses nested lists. Any help would be greatly appreciated. Thank you.

回答1:

Theres an awesome example by Peiwen Lu over codepen that you should check out.

回答2:

not sure the I'm get it right but you caould rotate the inner elements off the tree to get the desired orientation aswell.

So if you do this:

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

you could add:

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

To fix inner anchors orientation.

回答3:

Quite an old question but my search for horizontal CSS-only tree still leads me here. I didn't find any solution so I had to make it myself.

If you also prefer the CSS3 Family Tree code over the horizontal tree mentioned by Emmanuel (fixed-width, unfortunately), then you might like my codepen based on it. I needed the root to be on the right and it was a little bit harder.

Basically, I've manually rotated all margins/paddings one step (counter-)clockwise. E.g., instead of:

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

you should write

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

or (right to left),

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

In the case of a right-to-left tree, I had also to set direction: rtl.

来源：https://stackoverflow.com/questions/17913990/creating-horizontal-tree-with-css

标签

php

html

css

family-tree