html - 使用 CSS3/HTML 显示家谱

我想要的是

我正在尝试使用 CSS 获得类似于谱系的 View 。

不是表

它需要与 兼容 IE8+ (如果我找不到任何适用于 IE8 的解决方案，我可能会考虑 IE9+)

需要 浏览器可打印

问题是:在网络上我们有家谱资源( parent -> childs )，但没有谱系资源( child -> parents )

有用的链接，但对于家谱:

我有这个脚本工作
http://thecodeplayer.com/walkthrough/css3-family-tree

但是我需要完全反转它(我的主节点需要在底部)并且我没有尝试解决这个问题。

我想在视觉输出中拥有什么:

            G FATHER
      FATHER
            G MOTHER
CHILD

      MOTHER

(我也可以接受 child 可以位于底部而其 parent 位于顶部的解决方案)

但如果可能的话，我想用干净的 HTML 和 CSS 来完成它。

我正在使用简单的 UL 容器和 A 容器来获取信息。
这表示:

<ul>
    <li>
        <a>Child</a>
        <ul>
            <li>
                <a>Father</a>
                ...other ULs if available...
            </li>
            <li>
                <a>Mother</a>
                ...other ULs if available...
            </li>
        </ul>
    </li>
</ul>

我尝试过的(jsfiddles)

我尝试了几种情况，一种是浮点数，另一种是绝对定位，但我没有得到我想要的结果。

我必须摆弄以显示:

http://jsfiddle.net/darknessm0404/bZGFA/

和旧版本:

http://jsfiddle.net/darknessm0404/4SDNm/

如果您有任何建议或解决方案，请告诉我。
网上有很好的 CSS 家谱，但我不想要它们，因为它们与我想要的相反。

最佳答案

只需从 http://thecodeplayer.com/walkthrough/css3-family-tree 中获取代码并添加到 css

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

[编辑] 您还可以添加一个名为 Sandpaper 的脚本，以使 IE 中的生活更轻松。

并将旋转添加到 .tree li a 中。这将旋转所有内容，您仍然可以阅读文本。问题是，您必须重新定位 div。因此，将以下几行添加到 .tree 并使用这些值:

   position: relative;
   top: 300px;
   left: -200px;

关于html - 使用 CSS3/HTML 显示家谱，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13485592/