Question

我一直致力于家族树结构，并提出了这个代码。我坚持将子元素动态链接到树。当我抬头看"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树。

Answer 1

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

Answer 2

。试试这个：

<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 {}

在除法之间使用css创建子链接

2 个答案: