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 に答える
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 に答える