具有CSS和HTML的水平族谱-反向 [英] Horizontal Family tree with CSS and HTML - reversed

问题描述

我已经在网上搜索并发现了一个很好的家谱例子

  // ------- {{变量}} ------- // 
 
 $ white：＃eee9dc; 
 $ bg：＃2e6ba7; 
 
 $水平沟：100px； 
 $ border-radius：10px; 
 
 $ ent-min-height：60像素； 
 
 $ label-width：150px; 
 $ label-height：30像素； 
 $ label-border-radius：5px; 
 
 
 // ------- {{Styles}} ------- // 
 
 *，*：之前，* ：after {
 -webkit-box-sizing：border-box; 
 -moz-box-sizing：边框框; 
 box-sizing：边框框； 
} 
 
 body {
最小宽度：1200px； 
保证金：0; 
 padding：50px; 
颜色：$ white； 
字型：16px Verdana，无衬线； 
背景：$ bg； 
 -webkit-user-select：无； 
 -moz-user-select：无； 
 -ms-user-select：无； 
用户选择：无； 
} 
 
 #wrapper {
职位：相对； 
} 
 
 .branch {
职位：相对； 
右边距保证金：水平装订线+ $ label-width; 
& :：之前{
 content：; 
宽度：$水平沟槽/ 2; 
 border-top：2px实线$ white; 
头寸：绝对； 
右：-水平装订线； 
最高：50％； 
 margin-top：1像素； 
} 
} 
 
 .entry {
 position：relative; 
最低高度：$ entry-min-height； 
& :：之前{
 content：; 
身高：100％； 
 border-right：2px实线$ white; 
头寸：绝对； 
右：-（$水平水槽/ 2）; 
} 
& ;:之后{{
 content：; 
宽度：$水平沟槽/ 2; 
 border-top：2px实线$ white; 
头寸：绝对； 
右：-（$水平水槽/ 2）; 
最高：50％； 
 margin-top：1像素； 
} 
& ;:第一个孩子{
& ;:之前{
宽度：$ border-radius; 
身高：50％； 
最高：50％； 
 margin-top：2px; 
 border-radius：0 $ border-radius 0 0; 
} 
& ;:之后{{
 height：$ border-radius; 
 border-radius：0 $ border-radius 0 0; 
} 
} 
&：last-child {
&：before {
 width：$ border-radius; 
身高：50％； 
 border-radius：0 0 $ border-radius 0; 
} 
& ;:之后{{
 height：$ border-radius; 
 border-top：无； 
 border-bottom：2px实线$ white; 
 border-radius：0 0 $ border-radius 0; 
保证金最高：-$ border-radius + 1px; 
} 
} 
& .sole {
&：before {
 display：none; 
} 
& ;:之后{{
宽度：$水平水槽/ 2; 
高度：0； 
 margin-top：1像素； 
 border-radius：0; 
} 
} 
} 
 
 .label {
 display：block; 
最小宽度：$ label-width; 
 padding：5px 10px; 
 line-height：$ label-height-5px * 2; 
 text-align：center; 
边框：2px实线$ white; 
 border-radius：$ label-border-radius; 
头寸：绝对； 
右：0； 
最高：50％； 
 margin-top：-（$ label-height / 2）; 
} 
  

I've searched the web and foud a good example of family tree here in codepen:

I want the same thing, but rotated 180 degrees. I want to start my family tree with 16 members and descending (16-8-4-2-1) left to right.

How can I achieve it by using/editing that code? Stackoverflow says i need to accompany some code to my link, so I'm just pasting the HTML here.

HTML:

<div id="wrapper"><span class="label">Root</span>
<div class="branch lv1">
<div class="entry"><span class="label">Entry-1</span>
  <div class="branch lv2">
    <div class="entry"><span class="label">Entry-1-1</span>
      <div class="branch lv3">
        <div class="entry sole"><span class="label">Entry-1-1-1</span></div>
      </div>
    </div>
    <div class="entry"><span class="label">Entry-1-2</span>
      <div class="branch lv3">
        <div class="entry sole"><span class="label">Entry-1-2-1</span></div>
      </div>
    </div>
    <div class="entry"><span class="label">Entry-1-3</span>
      <div class="branch lv3">
        <div class="entry sole"><span class="label">Entry-1-3-1</span></div>
      </div>
    </div>
  </div>
</div>
<div class="entry"><span class="label">Entry-2</span></div>
<div class="entry"><span class="label">Entry-3</span>
  <div class="branch lv2">
    <div class="entry"><span class="label">Entry-3-1</span></div>
    <div class="entry"><span class="label">Entry-3-2</span></div>
    <div class="entry"><span class="label">Entry-3-3</span>
      <div class="branch lv3">
        <div class="entry"><span class="label">Entry-3-3-1</span></div>
        <div class="entry"><span class="label">Entry-3-3-2</span>
          <div class="branch lv4">
            <div class="entry"><span class="label">Entry-3-3-2-1</span></div>
            <div class="entry"><span class="label">Entry-3-3-2-2</span></div>
          </div>
        </div>
        <div class="entry"><span class="label">Entry-3-3-3</span></div>
      </div>
    </div>
    <div class="entry"><span class="label">Entry-3-4</span></div>
  </div>
</div>
<div class="entry"><span class="label">Entry-4</span></div>
<div class="entry"><span class="label">Entry-5</span></div>
</div>
</div>

解决方案

I'm still working on fixing the line curves but I got this to work by adjusting the css on the Codepen link you posted. I'll update the code/link as I improve it.

EDIT: Got it working! See the link and attached code. : http://codepen.io/anon/pen/OVQXGg

//------- {{ Variables }} -------//

$white: #eee9dc;
$bg: #2e6ba7;

$horizontal-gutter: 100px;
$border-radius: 10px;

$entry-min-height: 60px;

$label-width: 150px;
$label-height: 30px;
$label-border-radius: 5px;


//------- {{ Styles }} -------//

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  min-width: 1200px;
  margin: 0;
  padding: 50px;
  color: $white;
  font: 16px Verdana, sans-serif;
  background: $bg;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#wrapper {
  position: relative;
}

.branch {
  position: relative;
  margin-right: $horizontal-gutter + $label-width;
  &:before {
    content: "";
    width: $horizontal-gutter / 2;
    border-top: 2px solid $white;
    position: absolute;
    right: -$horizontal-gutter;
    top: 50%;
    margin-top: 1px;
  }
}

.entry {
  position: relative;
  min-height: $entry-min-height;
  &:before {
    content: "";
    height: 100%;
    border-right: 2px solid $white;
    position: absolute;
    right: -($horizontal-gutter / 2);
  }
  &:after {
    content: "";
    width: $horizontal-gutter / 2;
    border-top: 2px solid $white;
    position: absolute;
    right: -($horizontal-gutter / 2);
    top: 50%;
    margin-top: 1px;
  }
  &:first-child {
    &:before {
      width: $border-radius;
      height: 50%;
      top: 50%;
      margin-top: 2px;
      border-radius: 0 $border-radius 0 0;
    }
    &:after {
      height: $border-radius;
      border-radius: 0 $border-radius 0 0;
    }
  }
  &:last-child {
    &:before {
      width: $border-radius;
      height: 50%;
      border-radius: 0 0 $border-radius 0;
    }
    &:after {
      height: $border-radius;
      border-top: none;
      border-bottom: 2px solid $white;
      border-radius: 0 0 $border-radius 0;
      margin-top: -$border-radius + 1px;
    }
  }
  &.sole {
    &:before {
      display: none;
    }
    &:after {
      width: $horizontal-gutter / 2;
      height: 0;
      margin-top: 1px;
      border-radius: 0;
    }
  }
}

.label {
  display: block;
  min-width: $label-width;
  padding: 5px 10px;
  line-height: $label-height - 5px * 2;
  text-align: center;
  border: 2px solid $white;
  border-radius: $label-border-radius;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -($label-height / 2);
}

这篇关于具有CSS和HTML的水平族谱-反向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！