4

我想要的是

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

  • 不是表
  • 它需要兼容 IE8+（如果我没有找到任何适用于 IE8 的解决方案，我可能会考虑 IE9+）
  • 它需要可由浏览器打印

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

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

我有这个脚本工作 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 家谱，但我不想要它们，因为它们与我想要的相反。

4

3 回答 3

6

只需从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;
于 2012-11-21T10:09:09.377 回答
2

概念证明

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

我在这里所做的工作是严格针对 3 代祖先（数字和 css 会随着显示的不同代数而变化）。它基于您原来的 fiddle 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;
}
于 2012-11-21T18:58:49.270 回答
2

如果你愿意，你可以使用一张桌子来做你想做的事。

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

<tr>
    <td >test1</td>

</tr>

<tr>
    <td >test2</td>

</tr>
</table>

你可以在这个Jsfiddle中看到 4 代的结果

于 2012-11-21T10:26:08.860 回答