使用 CSS3/HTML 显示家谱

Question

我想要的

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

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

问题是：在网络上，我们有家谱资源(父母 -> 孩子)，但没有谱系资源(孩子 ->父母)

---

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

我有这个脚本工作 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;

Answer 2

如果你愿意，你可以使用表格来做你想做的事。

<table border=1>
<tr >
<td rowspan=3>
test
</td>
</tr>
<tr>
<td >test1</td>
</tr>
<tr>
<td >test2</td>
</tr>
</table>

您可以在此 Jsfiddle 中看到 4 代的结果

Answer 3

概念验证

我在这里的解决方案是纯 css，但如果祖先的数量未知，或者显示的数字是可变的或非常大，则可能不切实际。这也可能需要一些改进，特别是对于更好的跨浏览器显示。

我在这里研究的严格是针对 3 代祖先的(数字和 css 会随着显示的不同世代数而变化)。它基于您原始的小提琴html(带有一个额外的类)和修改后的css，在Chrome和Firefox中看起来不错，在IE9中看起来不错(对我来说行略有偏差)，在IE7-8中更多(当然有7行不显示行)。

.HTML

<ul class="tree anscestors-3">
<li>
<a href="#">Child</a>
<ul>
<li>
<a href="#">Ancestor 1</a>
<ul>
<li>
<a href="#">Ancestor 1A</a>
<ul>
<li>
<a href="#">Ancestor 1AA</a>
</li>
<li>
<a href="#">Ancestor 1AB</a>
</li>
</ul>
</li>
<li>
<a href="#">Ancestor 1B</a>
<ul>
<li>
<a href="#">Ancestor 1BA</a>
</li>
<li>
<a href="#">Ancestor 1BB</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Ancestor 2</a>
<ul>
<li>
<a href="#">Ancestor 2A</a>
<ul>
<li>
<a href="#">Ancestor 2AA</a>
</li>
<li>
<a href="#">Ancestor 2AB</a>
</li>
</ul>
</li>
<li>
<a href="#">Ancestor 2B</a>
<ul>
<li>
<a href="#">Ancestor 2BA</a>
</li>
<li>
<a href="#">Ancestor 2BB</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>            
</ul>

.CSS

ul.tree li
{
display: block;
float: left;
clear: left;
position:relative;
white-space:nowrap;
list-style: none;
height: 1em;
padding-right: 1em;
}
ul.tree li:after {
content: '';
position: absolute;
border-right: 1px solid #000;
right: .5em;
}
ul.tree a {
display: block;
background-color:#CCC;
font-size: .8em;
position: relative;
}
ul.tree a:before,
ul.tree a:after {
content: '';
position: absolute;
border-top: 1px solid #000;
top: .6em;
width: .6em;    
}
ul.tree a:before {
right: 100%;
}
ul.tree li > ul
{
margin:0;
padding:0;
position:absolute;
left:100%;
}
ul.anscestors-3 {
height: 15em; /*3 for child + 2*1 + 2*2 + 2*3 */
}
ul.anscestors-3 > li {
margin-top: 7em;
}
ul.anscestors-3 > li > a:before {
display: none;
}
ul.anscestors-3 > li:after {
height: 8em;
top: -3.5em;
}
ul.anscestors-3 anscestors-3 > li > ul > li:first-child {
margin-top: -5em;
}
ul.anscestors-3 > li > ul > li:last-child {
margin-top: 3em;
}
ul.anscestors-3 > li > ul > li:after {
height: 4em;
top: -1.5em;
}
ul.anscestors-3 > li > ul > li > ul > li:first-child {
margin-top: -3em;
}
ul.anscestors-3 > li > ul > li > ul > li:last-child {
margin-top: 1em;
}
ul.anscestors-3 > li > ul > li > ul > li:after {
height: 2em;
top: -.5em;
}

ul.anscestors-3 > li > ul > li > ul > li > ul > li:first-child{
margin-top: -2em;
}
ul.anscestors-3 > li > ul > li > ul > li > ul > li:last-child {
margin-top: 0em;
}
ul.anscestors-3 > li > ul > li > ul > li > ul > li > a:after {
display: none;
}