Wie man spezifische "Baumansicht" macht

Question

Ich möchte eine Art von Baumansicht erstellen, obwohl ich nicht weiß, ob es das richtige Wort ist. Ich zeichne das Bild davon für Sie, um zu verstehen, was ich meine. Im Grunde sieht es aus wie eine Blume auf dem Kopf.

Was ist der beste Weg, dies zu tun? Für jeden Benutzer, der unter dem angemeldeten Benutzer registriert ist, sollte es einen neuen Zweig mit seinem Bild geben und der Name und die Anzahl der Zweige sind nicht begrenzt. Ich nehme an, jQuery ist der Weg, aber ich konnte nichts finden, was mir helfen könnte. Ich würde mich über Links oder Tipps für jQuery-Plugins oder andere nützliche Tipps freuen.

Answer 1

Ich könnte mit dieser Antwort ein wenig über Bord gegangen sein, aber es hat Spaß gemacht, einige Dinge auszuprobieren, also habe ich eine komplette Lösung gemacht. Das Layout passt sich den Größenänderungen für die meisten Elemente an. Ich habe versucht, das CSS so einfach wie möglich zu bearbeiten.

Alles, was Sie tun müssen, ist level_2_entry_container so oft du willst zu duplizieren. Dies kann leicht entweder Client-Seite oder Server-Seite mit ein paar Zeilen Code erreicht werden. Die Inhaltsstruktur ist für die linke und rechte Seite gleich (die Richtung und Positionierung wird über CSS gesteuert).

Getestet auf die neuesten Versionen Chrome und Firefox.

body { 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    font-size: 12px; 
 
    color: #444; 
 
} 
 
.main_container { 
 
    min-width: 400px; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
} 
 
.solution_container { 
 
    position: relative; 
 
} 
 
.flex_container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
.flex_item { 
 
    flex-grow: 1; 
 
    flex-shrink: 1; 
 
    flex-basis: 0; 
 
} 
 
.flex_item_static { 
 
    flex-grow: 0; 
 
    flex-shrink: 0; 
 
    flex-basis: auto; 
 
    position: relative; 
 
} 
 
.level_1_entry_image { 
 
    width: 160px; /* change according to preference */ 
 
    height: 160px; /* change according to preference */ 
 
    display: block; 
 
    border-radius: 50%; 
 
    box-sizing: border-box; 
 
    border: solid 4px #eee; 
 
    background-color: #eee; 
 
} 
 
.level_1_entry_content { 
 
    padding-left: 20px; /* change according to preference - controls text distance from level_1_image */ 
 
} 
 
.center_line { 
 
    position: absolute; 
 
    width: 4px; 
 
    height: 100%; 
 
    top: 0px; 
 
    left: 50%; 
 
    margin-left: -2px; 
 
    background-color: #eee; 
 
    z-index: 1; 
 
} 
 
.center_footer { 
 
    position: absolute; 
 
    width: 20px; 
 
    height: 4px; 
 
    bottom: 0px; 
 
    left: 50%; 
 
    margin-left: -10px; 
 
    background-color: #eee; 
 
    z-index: 1; 
 
} 
 
.level_2_entry_container { 
 
    width: 50%; 
 
    box-sizing: border-box; 
 
    margin-top: -50px; 
 
} 
 
.level_2_entry_container:first-child { 
 
    margin-top: 0px; 
 
} 
 
.level_2_entry_container:nth-child(odd) { 
 
    margin-right: auto; 
 
} 
 
.level_2_entry_container:nth-child(even) { 
 
    margin-left: auto; 
 
} 
 
.level_2_entry_image, 
 
.level_2_entry_content { 
 
    margin: 20px; /* change according to preference - controls level_2_image distance from central_line */ 
 
} 
 
.level_2_entry_image { 
 
    width: 100px; /* change according to preference */ 
 
    height: 100px; /* change according to preference */ 
 
    display: block; 
 
    border-radius: 50%; 
 
    box-sizing: border-box; 
 
    border: solid 4px #eee; 
 
    position: relative; 
 
    z-index: 2; 
 
    background-color: #eee; 
 
} 
 
.level_2_entry_container:nth-child(odd) .level_2_entry_image { 
 
    margin-left: 0px !important; 
 
    margin-bottom: 0px !important; 
 
} 
 
.level_2_entry_container:nth-child(even) .level_2_entry_image { 
 
    margin-right: 0px !important; 
 
    margin-bottom: 0px !important; 
 
} 
 
.level_2_entry_content { 
 
    margin-left: 0px !important; 
 
    margin-right: 0px !important; 
 
    margin-bottom: 0px !important; 
 
    padding: 20px; /* change according to preference - controls text distance from level_2_image */ 
 
    padding-top: 0px; 
 
    padding-bottom: 0px; 
 
} 
 
.level_2_entry_container:nth-child(odd) .level_2_entry_content { 
 
    padding-left: 0px !important; 
 
    text-align: right; 
 
} 
 
.level_2_entry_container:nth-child(even) .level_2_entry_content { 
 
    padding-right: 0px !important; 
 
    text-align: left; 
 
} 
 
.diagonal_line_1, 
 
.diagonal_line_2 { 
 
    position: absolute; 
 
    width: 75%; 
 
    height: 75%; 
 
    z-index: 1; 
 
    top: 0px; 
 
} 
 
.diagonal_line_1 { 
 
    right: 0px; 
 
} 
 
.diagonal_line_2 { 
 
    left: 0px; 
 
} 
 
.level_2_entry_container:nth-child(odd) .diagonal_line_2 { 
 
    display: none; 
 
} 
 
.level_2_entry_container:nth-child(even) .diagonal_line_1 { 
 
    display: none; 
 
} 
 
.level_2_entry_container:nth-child(odd) > .flex_container > .flex_item:nth-child(1) { 
 
    order: 1; 
 
} 
 
.level_2_entry_container:nth-child(odd) > .flex_container > .flex_item:nth-child(2) { 
 
    order: 2; 
 
} 
 
.level_2_entry_container:nth-child(even) > .flex_container > .flex_item:nth-child(1) { 
 
    order: 2; 
 
} 
 
.level_2_entry_container:nth-child(even) > .flex_container > .flex_item:nth-child(2) { 
 
    order: 1; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="UTF-8" /> 
 
     <meta http-equiv="content-type" content="text/html;charset=UTF-8"/> 
 
    </head> 
 
    <body> 
 
     <div class="main_container"> 
 
      <div class="solution_container"> 
 
       <div class="flex_container"> 
 
        <div class="flex_item"></div> 
 
        <div class="flex_item flex_item_static"> 
 
         <img class="level_1_entry_image" src="http://placehold.it/320x320"/> 
 
        </div> 
 
        <div class="flex_item"> 
 
         <div class="level_1_entry_content">Lorem ipsum dolor sit amet</div> 
 
        </div> 
 
       </div> 
 
       <div class="center_line"></div> 
 
       <div class="center_footer"></div> 
 
       <div class="level_2_container"> 
 
        <div class="level_2_entry_container"> 
 
         <div class="flex_container"> 
 
          <div class="flex_item"> 
 
           <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div> 
 
          </div> 
 
          <div class="flex_item flex_item_static"> 
 
           <img class="level_2_entry_image" src="http://placehold.it/200x200"/> 
 
           <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1"> 
 
            <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" /> 
 
           </svg> 
 
           <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2"> 
 
            <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" /> 
 
           </svg> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="level_2_entry_container"> 
 
         <div class="flex_container"> 
 
          <div class="flex_item"> 
 
           <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div> 
 
          </div> 
 
          <div class="flex_item flex_item_static"> 
 
           <img class="level_2_entry_image" src="http://placehold.it/200x200"/> 
 
           <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1"> 
 
            <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" /> 
 
           </svg> 
 
           <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2"> 
 
            <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" /> 
 
           </svg> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="level_2_entry_container"> 
 
         <div class="flex_container"> 
 
          <div class="flex_item"> 
 
           <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div> 
 
          </div> 
 
          <div class="flex_item flex_item_static"> 
 
           <img class="level_2_entry_image" src="http://placehold.it/200x200"/> 
 
           <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1"> 
 
            <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" /> 
 
           </svg> 
 
           <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2"> 
 
            <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" /> 
 
           </svg> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="level_2_entry_container"> 
 
         <div class="flex_container"> 
 
          <div class="flex_item"> 
 
           <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div> 
 
          </div> 
 
          <div class="flex_item flex_item_static"> 
 
           <img class="level_2_entry_image" src="http://placehold.it/200x200"/> 
 
           <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1"> 
 
            <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" /> 
 
           </svg> 
 
           <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2"> 
 
            <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" /> 
 
           </svg> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="level_2_entry_container"> 
 
         <div class="flex_container"> 
 
          <div class="flex_item"> 
 
           <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div> 
 
          </div> 
 
          <div class="flex_item flex_item_static"> 
 
           <img class="level_2_entry_image" src="http://placehold.it/200x200"/> 
 
           <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1"> 
 
            <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" /> 
 
           </svg> 
 
           <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2"> 
 
            <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" /> 
 
           </svg> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="level_2_entry_container"> 
 
         <div class="flex_container"> 
 
          <div class="flex_item"> 
 
           <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div> 
 
          </div> 
 
          <div class="flex_item flex_item_static"> 
 
           <img class="level_2_entry_image" src="http://placehold.it/200x200"/> 
 
           <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1"> 
 
            <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" /> 
 
           </svg> 
 
           <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2"> 
 
            <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" /> 
 
           </svg> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="level_2_entry_container"> 
 
         <div class="flex_container"> 
 
          <div class="flex_item"> 
 
           <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div> 
 
          </div> 
 
          <div class="flex_item flex_item_static"> 
 
           <img class="level_2_entry_image" src="http://placehold.it/200x200"/> 
 
           <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1"> 
 
            <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" /> 
 
           </svg> 
 
           <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2"> 
 
            <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" /> 
 
           </svg> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="level_2_entry_container"> 
 
         <div class="flex_container"> 
 
          <div class="flex_item"> 
 
           <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div> 
 
          </div> 
 
          <div class="flex_item flex_item_static"> 
 
           <img class="level_2_entry_image" src="http://placehold.it/200x200"/> 
 
           <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1"> 
 
            <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" /> 
 
           </svg> 
 
           <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2"> 
 
            <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" /> 
 
           </svg> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>