html - 使用 CSS3/HTML 显示家谱

Question

我想要什么

我正在尝试使用 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)

我尝试了几种情况，一种使用 float ，另一种使用更绝对的定位，但我没有得到我想要的结果。

我必须摆弄才能显示:

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;