html - CSS3家系図、妻を追加する方法

Question

CSS3のみを使用して家系図を作成する方法については、このガイドに従っています。しかし、私は結婚の仕方について頭を悩ませることはできません。

明確にするために：コードが今していることはこれです：

私が追加したいのはこれです：

簡単な質問ですが、今は在庫があります

Answer 1

ページのメモから：

「注：私はこの家系図の新しいバージョンに取り組んでいます。これはある程度IEをサポートし、家系図の実用的なソリューションにするために複数の親を持ちます。」

したがって、「複数の親」はまだサポートされていないようです。

Answer 2

夫/妻を同じli要素に入れ、CSSを使用してそれらを接続するのはどうですか？このようなもの：

<style>
  .husband { float: left; }
  .wife { margin-left:10px; }
  .wife::before { 
    /* pseudo CSS, will need to be modified */
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 1px solid #ccc;
    width: 50%; height: 20px;
  }
</style>


<li>
    <ul>
        <li>
            <a class="husband" href="#">Grand Child</a>
            <a class="wife" href="#">Wife</a>
            <ul>
               <li><a href="#">Kid</a></li>
               <li><a href="#">Kid</a></li>
            </ul>
        </li>
    </ul>
</li>

Answer 3

誰かが夫と妻の関係をサポートするために元のコードを更新したようです。幸運を！

Answer 4

これが私が取ったアプローチです

<li>
  <ul>
    <li>Father</li>
    <li>Mother</li>
  </ul>
  <a href="http://www.clarkeology.com/names/clarke/21/james">James CLARKE1779 - 1860</a>
  <div itemprop="spouse">
    <a href="http://www.clarkeology.com/names/cole/19/elizabeth">Elizabeth COLE 1794 - 1865</a>
  </div>
  <ol>
    <li><a>Child</a></li>
    <li><a>Child</a></li>
    <li><a>Child</a></li>
  </ol>
</li>

そうすれ<li>ば、ツリー全体でそのように繰り返すことができます（ただし、すべてに子供と親を追加すると、混乱が生じます...通常、そのビューの「コア」人物を通過したら、どちらか一方を追加するだけです。

実際の例はhttp://www.clarkeology.comにあり、/ css / _tree.cssに注釈付きのcssがあり、GEDCOMファイルを解析して必要なhtmlを作成するために作成したコードはhttps://github.com/pauly/にあります。 js-gedcom

私は実際にschema.orgmicroformatsをすべての私のものに追加しているので、上記itempropの代わりに使用しましたが、クラスは問題なく機能します。class

先日見つけたオリジナルのCSSは本当に楽しかったです。これはとても楽しかったです。プルリクエストは私のコードで歓迎します！

Answer 5

これはどう？

<li>
    <ul>
        <li>
            <a href="#">Grand Child</a>
        </li>
        <li>
            <a href="#">Wife</a>
        </li>
    </ul>
</li>

したがって、最後の孫をulにラップします。これにより、2つの間に線が引かれますが、現在、ボックスモデルではこれが可能ではないと思います...