0

我一直在研究家谱结构并提出了这个代码。我坚持将子元素动态链接到树。请提供帮助，因为我查看了“CSS Family Tree”，但无法从中获得太多帮助。

HTML

<body>
<div class="tree" >
<div id="parent">
    <div id="dad" class="people" >Father</div>
    <div id="mom" class="people" >Mother</div>
    <div class="link"></div>
</div>
<div id="user">
    <div id="user" class="people" >User</div>
    <div id="spouse" class="people" >Spouse</div>
    <div style="clear:both; width:200px; height: 10px; margin-left:88px;border-left:2px #ccc solid;border-bottom:2px #ccc solid;border-right:2px #ccc solid; "></div>
</div>
<div style="width:2px; height:24px; background:#ccc; margin:0 auto;"></div>
<div id="children" style="margin:0 auto; display:block;">
    <div id="1" class="child" >child 1</div>
    <div id="2" class="child" >child 1</div>

</div>

</div>
</body>
​

CSS

.tree{
    width:960px;
    min-height: 600px;
}

#parent{
    margin: 0 129px;
    width:400px;
    height:70px;
    display:block;
}

.link{
    clear:both; 
    width:200px; 
    height: 10px; 
    margin-left:88px;
    border-left:2px #ccc solid;
    border-bottom:2px #ccc solid;
    border-right:2px #ccc solid; 
}

.people{
    height:60px; 
    width:185px; 
    float:left;  
    background:#999;
    margin-right:10px;
}

.child{
    height:60px; 
    width:185px; 
    background:#999;
    margin:0 auto;
    float:left;
    margin-right:10px;
}

#user{
    display:table;
    margin:0 auto;        
}

#user::before{
    width:0px;
    height:24px;
    margin-left:40px; 
    content:'';
    display:block;
    border-left: 2px #ccc solid;
}
#child::before{
    width:0px;
    height:24px;
    margin-left:40px; 
    content:'';
    display:block;
    border-left: 2px #ccc solid;
    border-top: 2px #ccc solid;
}
​

这是我的“JS Fiddle”我想要使用 css 的子元素的根行是否可能？类似于 CSS 树。

4

2 回答 2

1

如果有人遇到与我相同的问题，这可能会有所帮助。这是一个解决方案 CSS Family Tree

于 2012-10-04T15:19:10.550 回答
0

。尝试这个：

<body>
<div class="tree" >
<div id="parent">
    <div class="people parent male" >Father</div>
    <div class="people parent female" >Mother</div>
    <div class="link"></div>
</div>
<div id="user">
    <div class="people user male" >User</div>
    <div class="people user female" >Spouse</div>
    <div style="clear:both; width:200px; height: 10px; margin-left:88px;border-left:2px #ccc solid;border-bottom:2px #ccc solid;border-right:2px #ccc solid; "></div>
</div>
<div style="width:2px; height:24px; background:#ccc; margin:0 auto;"></div>
<div id="children" style="margin:0 auto; display:block;">
    <div class="people child male" >child 1</div>
    <div class="people child female" >child 1</div>
</div>
</div>
</body>

然后相应地创建类 .people、.parent、.user、.child、.male、.female。您还可以使用组合来隔离案例，例如 .user.male{} 或 .child.female{}

于 2012-10-04T14:10:55.477 回答