0

私は家系図の構造に取り組んでいて、このコードを思いついた。子要素をツリーに動的にリンクすることに固執しています。「CSS家系図」を見てきましたが、なかなかうまくいきませんでした。

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フィドル」です。cssを使用して子要素のルート行が必要ですか？cssツリーに似ています。

4

2 に答える 2

1

これは、誰かが私と同じ問題に見舞われた場合に役立つ可能性があります。これが解決策です CSS家系図

于 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 に答える