4

私が欲しいもの

CSS で家系図のようなビューを取得しようとしています。

  • テーブルではありません
  • IE8+と互換性がある必要があります（IE8の解決策が見つからない場合は、IE9+を検討するかもしれません）
  • ブラウザで印刷できる必要があります

問題は、Web 上には家系図 (親 -> 子供) のリソースがありますが、家系図 (子供 -> 親)のリソースはありません。

便利なリンクですが、家系図用です:

このスクリプトを http://thecodeplayer.com/walkthrough/css3-family-treeで動作させました

しかし、私はそれを完全に逆にする必要があり（私のメインノードは一番下にある必要があります）、そのための解決策を試すことができませんでした.

私が視覚的な出力にしようとしていること:

            G FATHER
      FATHER
            G MOTHER
CHILD

      MOTHER

（子を下に、親を上に配置するソリューションも受け入れられます）

しかし、できればクリーンな HTML と CSS で実現したいと考えています。

私は単純な UL コンテナーと情報用の A コンテナーを使用しています。これの意味は：

<ul>
    <li>
        <a>Child</a>
        <ul>
            <li>
                <a>Father</a>
                ...other ULs if available...
            </li>
            <li>
                <a>Mother</a>
                ...other ULs if available...
            </li>
        </ul>
    </li>
</ul>

私が試したこと（jsfiddles）

私はいくつかのケースを試しました。1 つはフロート、もう 1 つはより絶対的な配置を使用していますが、必要な結果が得られません。

私は示すためにいじる必要があります:

http://jsfiddle.net/darknessm0404/bZGFA/

そして古いバージョン：

http://jsfiddle.net/darknessm0404/4SDNm/

提案や解決策があれば教えてください。Web 上に CSS を使用した優れた家系図がありますが、それらは私が望むものとは逆であるため、それらは必要ありません。

4

3 に答える 3

6

http://thecodeplayer.com/walkthrough/css3-family-treeからコードを取得し、css に追加するだけです

.tree{
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   transform:  rotate(180deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE6, IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)" /* IE8 */
   -ms-transform: rotate(180deg);
}

[編集] IE での生活を楽にするために、Sandpaperというスクリプトを追加することもできます。

.tree li a回転にも追加します。これにより、すべてが回転し、テキストを読むことができます。問題は、div の位置を変更する必要があることです。したがって.tree、次の行に追加して、値をいじってみましょう。

   position: relative;
   top: 300px;
   left: -200px;
于 2012-11-21T10:09:09.377 に答える
2

コンセプトの証明

ここでの私の解決策は純粋なcssですが、祖先の数が不明であるか、表示される数が可変であるか非常に大きい場合は、実用的でない可能性があります。また、特により優れたディスプレイクロスブラウザの場合は、多少の調整が必要になる場合があります。

私がここで取り組んだのは、厳密には3世代の祖先を対象としています（表示される世代の数が異なると、番号とcssが変わります）。これは、元のフィドルhtml（1つの追加クラスを含む）と変更されたcssに基づいており、ChromeとFirefoxで見栄えがよく、IE9では問題ありません（私にとってはわずかに線がずれています）。台詞）。

HTML

<ul class="tree anscestors-3">
    <li>
        <a href="#">Child</a>
        <ul>
            <li>
                <a href="#">Ancestor 1</a>
                <ul>
                    <li>
                        <a href="#">Ancestor 1A</a>
                        <ul>
                            <li>
                                <a href="#">Ancestor 1AA</a>
                            </li>
                            <li>
                                <a href="#">Ancestor 1AB</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Ancestor 1B</a>
                        <ul>
                            <li>
                                <a href="#">Ancestor 1BA</a>
                            </li>
                            <li>
                                <a href="#">Ancestor 1BB</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Ancestor 2</a>
                <ul>
                    <li>
                        <a href="#">Ancestor 2A</a>
                        <ul>
                            <li>
                                <a href="#">Ancestor 2AA</a>
                            </li>
                            <li>
                                <a href="#">Ancestor 2AB</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Ancestor 2B</a>
                        <ul>
                            <li>
                                <a href="#">Ancestor 2BA</a>
                            </li>
                            <li>
                                <a href="#">Ancestor 2BB</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>            
</ul>

CSS

ul.tree li
{
    display: block;
    float: left;
    clear: left;
    position:relative;
    white-space:nowrap;
    list-style: none;
    height: 1em;
    padding-right: 1em;
}

ul.tree li:after {
    content: '';
    position: absolute;
    border-right: 1px solid #000;
    right: .5em;
}

ul.tree a {
   display: block;
   background-color:#CCC;
   font-size: .8em;
   position: relative;
}

ul.tree a:before,
ul.tree a:after {
   content: '';
   position: absolute;
   border-top: 1px solid #000;
   top: .6em;
   width: .6em;    
}

ul.tree a:before {
   right: 100%;
}

ul.tree li > ul
{
    margin:0;
    padding:0;
    position:absolute;
    left:100%;
}

ul.anscestors-3 {
    height: 15em; /*3 for child + 2*1 + 2*2 + 2*3 */
}

ul.anscestors-3 > li {
    margin-top: 7em;
}

ul.anscestors-3 > li > a:before {
    display: none;
}

ul.anscestors-3 > li:after {
    height: 8em;
    top: -3.5em;
}

ul.anscestors-3 anscestors-3 > li > ul > li:first-child {
    margin-top: -5em;
}
ul.anscestors-3 > li > ul > li:last-child {
    margin-top: 3em;
}

ul.anscestors-3 > li > ul > li:after {
    height: 4em;
    top: -1.5em;
}

ul.anscestors-3 > li > ul > li > ul > li:first-child {
    margin-top: -3em;
}
ul.anscestors-3 > li > ul > li > ul > li:last-child {
    margin-top: 1em;
}
ul.anscestors-3 > li > ul > li > ul > li:after {
    height: 2em;
    top: -.5em;
}


ul.anscestors-3 > li > ul > li > ul > li > ul > li:first-child{
    margin-top: -2em;
}
ul.anscestors-3 > li > ul > li > ul > li > ul > li:last-child {
    margin-top: 0em;
}
ul.anscestors-3 > li > ul > li > ul > li > ul > li > a:after {
    display: none;
}
于 2012-11-21T18:58:49.270 に答える
2

必要に応じて、テーブルを使用して必要なことを行うことができます。

<table border=1>
<tr >
   <td rowspan=3>
      test
   </td>
</tr>

<tr>
    <td >test1</td>

</tr>

<tr>
    <td >test2</td>

</tr>
</table>

このJsfiddleで4世代の結果を見ることができます

于 2012-11-21T10:26:08.860 に答える