混合家庭水平家谱树

Question

因此，我正在使用以下代码为我的网站创建水平家谱树，但我需要帮助。我需要弄清楚如何建立一个混血家庭……在这种情况下……第一位妻子已经去世，一个孩子再嫁给一个与他再婚并育有一个孩子的男人，或者生下一个私婚的孩子。 ...基本上，它会有一个输入框链接到两个我可以用于妻子的侧面输入框。

任何帮助都会很棒！不知道如何解决它们，我已经把它浇了几天。..我的眼睛很累。

链接到Codepen树：https://codepen.io/P233/pen/Kzbsi

希望最后看起来像这样。

enter image description here

这是我到目前为止在css / html中修改使用的代码：

html

<div class="entry"><span class="label"><a href:" ">♔ Icarus of Speros</a> (57, ♂)<br><a href:" ">♕ Gaia of Speros</a> (47, ♀)</span>
  <div class="branch lv2">
<div class="entry"><span class="label"><a href:" ">Angelus of Speros</a> (32, ♂)<br><a href:" ">b. Theodora of Laskaris</a> (26, ♀)</span>
    </div>
    <div class="entry"><span class="label"><a href:" ">Pericles of Speros</a> (28, ♂)</span>

    </div>
    <div class="entry"><span class="label"><a href:" ">Ophelia of Speros</a> (26, ♀)</span></div>
    <div class="entry"><span class="label"><a href:" ">Orion of Speros</a> (26, ♂)</span>

    </div>
  </div>
</div>
<div class="entry"><span class="label"><s>Orpheus of Spero</s>s (52, ♂)<br><a href:" ">Io of Speros</a> (37, ♀)</span>
  <div class="branch lv2">
    <div class="entry"><span class="label"><s>Arius of Speros</s> (19, ♂)</span></div>
    <div class="entry"><span class="label">Leonidas of Speros (17, ♂)</span></div>
    <div class="entry"><span class="label"><s>Zenna of Speros</s> (5, ♀)</span>
    </div>
  </div>
</div>

CSS

.noroot {
  min-width: 900px;
  position: relative;
  margin: -50px 0 0 -110px;
  background: transparent;
  -ms-transform: scale(0.75, 0.75); /* IE 9 */
  -webkit-transform: scale(0.75, 0.75); /* Safari */
  transform: scale(0.75, 0.75);
}

div.noroot > span.label, div.lv1:before {
display: none;
}

.laskaris {
  min-width: 900px;
  position: relative;
  margin: 0 0 0 -80px;
  background: transparent;
  -ms-transform: scale(0.75, 0.75); /* IE 9 */
  -webkit-transform: scale(0.75, 0.75); /* Safari */
  transform: scale(0.75, 0.75);
}

.branch {
  position: relative;
  margin-left: 250px;
}
.branch:before {
  content: "";
  width: 25px;
  border-top: 2px solid #eee9dc;
  position: absolute;
  left: -75px;
  top: 50%;
  margin-top: 1px;
}

.entry {
  position: relative;
  min-height: 60px;
}
.entry:before {
  content: "";
  height: 100%;
  border-left: 2px solid #eee9dc;
  position: absolute;
  left: -50px;
}
.entry:after {
  content: "";
  width: 50px;
  border-top: 2px solid #eee9dc;
  position: absolute;
  left: -50px;
  top: 50%;
  margin-top: 1px;
}
.entry:first-child:before {
  width: 10px;
  height: 50%;
  top: 50%;
  margin-top: 2px;
  border-radius: 10px 0 0 0;
}
.entry:first-child:after {
  height: 10px;
  border-radius: 10px 0 0 0;
}
.entry:last-child:before {
  width: 10px;
  height: 50%;
  border-radius: 0 0 0 10px;
}
.entry:last-child:after {
  height: 10px;
  border-top: none;
  border-bottom: 2px solid #eee9dc;
  border-radius: 0 0 0 10px;
  margin-top: -9px;
}
.entry.sole:before {
  display: none;
}
.entry.sole:after {
  width: 50px;
  height: 0;
  margin-top: 1px;
  border-radius: 0;
}


.bastard {
  position: relative;
  min-height: 60px;
}
.bastard:before {
  content: "";
  height: 100%;
  border-left: 2px solid transparent;
  position: absolute;
  left: -50px;
}
.bastard:after {
  content: "";
  width: 50px;
  border-top: 2px solid transparent;
  position: absolute;
  left: -50px;
  top: 50%;
  margin-top: 1px;
}
.bastard:first-child:before {
  width: 10px;
  height: 50%;
  top: 50%;
  margin-top: 2px;
  border-radius: 10px 0 0 0;
}
.bastard:first-child:after {
  height: 10px;
  border-radius: 10px 0 0 0;
}
.bastard:last-child:before {
  width: 10px;
  height: 50%;
  border-radius: 0 0 0 10px;
}
.bastard:last-child:after {
  height: 10px;
  border-top: none;
  border-bottom: 2px solid transparent;
  border-radius: 0 0 0 10px;
  margin-top: -9px;
}
.bastard.sole:before {
  display: none;
}
.bastard.sole:after {
  width: 50px;
  height: 0;
  margin-top: 1px;
  border-radius: 0;
}

.label {
  display: block;
  min-width: 150px;
  padding: 5px 10px;
  line-height: 20px;
  text-align: center;
  border: 2px solid #eee9dc;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -15px;
}

.label a:before { display: none; }
.label a:hover:before { display: none; }