用CSS3/HTML显示家谱

Question

我想要的是

我试图用CSS获得一个类似血统的视图.

• 不是桌子
• 它需要兼容IE8 +(如果我找不到IE8的任何解决方案,我可能会考虑IE9 +)
• 它需要由浏览器打印

问题是:在网络上我们有家庭树的资源(父母 - >孩子),但不适用于血统(孩子 - >父母)

---

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

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

但是我需要完全反转它(我的主节点需要在底部)并且我没有尝试解决方案.

---

我想要的视觉输出:

            G FATHER
      FATHER
            G MOTHER
CHILD

      MOTHER

(我也可以接受这样的解决方案:孩子可以位于底部,而其父母位于顶部)

但是如果可能的话,我希望用干净的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家谱,但我不想要它们,因为它们与我想要的相反.

Answer 1

只需从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;