Php 用css创建水平树
我有一个数组,用来填充系谱表。按如下顺序排列: ---------三, ----一, --------四, 0 --------五, ----二, --------六, 等等。。。例如 我的代码是:Php 用css创建水平树,php,html,css,family-tree,Php,Html,Css,Family Tree,我有一个数组,用来填充系谱表。按如下顺序排列: ---------三, ----一, --------四, 0 --------五, ----二, --------六, 等等。。。例如 我的代码是: <?php $generations = 4; $genTableArray = array(); for($genCol = 0; $genCol <= $generations; $genCol++) { $genRowCount = pow(2, $genCol);
<?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>
它会旋转,但文本也会横向显示。这是我的第一期。我也很难使用我的数组来填充它的排列方式。“css3族”树使用嵌套列表。任何帮助都将不胜感激。谢谢。我不确定是否正确,但您可以旋转树的内部元素以获得所需的方向 因此,如果您这样做:
.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);
}
固定内锚的方向。有一个很棒的例子,你应该去看看
这是一个很老的问题,但我对水平CSS纯树的搜索仍然将我引向这里。我没有找到任何解决办法,所以我不得不自己做 如果您也更喜欢CSS3家族树代码,而不是Emmanuel提到的水平树(不幸的是,固定宽度),那么您可能希望基于它。我需要根在右边,这有点难 基本上,我已经手动将所有边距/填充顺时针旋转了一步(逆时针)。例如,代替:
.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%;
}
或(从右到左)
对于从右向左的树,我还必须设置
方向:rtl
您认为应该“使用CSS”而不是表,这有什么特别的原因吗?从语义上讲,没有任何其他标记能够像表那样表达祖先/后代之间的关系。请注意,您正在查看的项目只支持一位家长。这只是因为我希望它看起来更好。HTML表格似乎是一个负担,使美观。通过CSS增强元素的外观并不局限于非表格元素。如果你对背景图像有创意,你可以做很多事情:我确实在添加代码方面取得了进展,但是节点之间的行没有正确显示。我试着玩弄东西,但没用。我认为唯一的办法是使用图像制作一个html表格,让它看起来更漂亮/
.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%;
}