家谱页面html,用CSS3 / HTML显示家谱

我想要的是

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

>不是桌子

>它需要兼容IE8(如果我找不到IE8的任何解决方案,我可能会考虑IE9)

>它需要由浏览器打印

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

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

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

我想要的视觉输出：

G FATHER

FATHER

G MOTHER

CHILD

MOTHER

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

但是如果可能的话,我希望用干净的HTML和CSS来完成它.

我正在使用简单的UL容器和A容器来获取信息.

这意味着：

• Child

  • Father

    ...other ULs if available...

  • Mother

    ...other ULs if available...

我尝试了什么(jsfiddles)

我尝试了几种情况,一种是浮子,另一种是绝对定位,但我没有得到我想要的结果.

我不得不小提示：

和旧版本：

如果您有任何建议或解决方案,请告诉我.

网上有很好的CSS家谱,但我不想要它们,因为它们与我想要的相反.