Pracowałem nad strukturą drzewa genealogicznego i wymyśliłem ten kod. Utknąłem się na łączeniu elementów dziecka dynamicznie do drzewa. Prosimy o pomoc, gdy spojrzałem na "CSS Drzewo genealogiczne", ale nie mogłem się dostać dużo od niego.

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;
}
​

Oto moja "JS Fiddle" Chcę, aby linie korzeniowe dla elementu dziecka przy użyciu CSS jest możliwe? Podobny do drzewa CSS.

0
Daniel Euchar 4 październik 2012, 17:47

2 odpowiedzi

Najlepsza odpowiedź

Może to być pomocne, gdyby ktoś uderzył w ten sam problem jak ja. Oto rozwiązanie Drzewo genealogiczne CSS

1
Daniel Euchar 4 październik 2012, 15:19

.Spróbuj tego:

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

A następnie utwórz klasy .People, .parent, .user, .Child, .male, ..Female. Możesz także użyć kombinacji do izolowania przypadków, takich jak .user.male {} lub .Child.female {}

0
Marius Stuparu 4 październik 2012, 14:10