1. Zuhause
  2. Frage und Antwort
  3. CSS Org Chart Horizontale Anschlüsse

CSS Org Chart Horizontale Anschlüsse

2017-06-22 11 views
0

Ich bekomme keine richtige Organisationsstruktur mit CSS. Leitungsverbinder stimmen nicht mit Knotenelementen überein. Ich weiß nicht, wie ich sie aufstellen soll. JSFIDDLECSS Org Chart Horizontale Anschlüsse

CSS-Code

* { 
    margin: 0; 
    padding: 0; 
} 

.tree img { 
    width: 75px; 
} 

.tree { 
    width: 1994px; 
} 

.tree ul { 
    padding-top: 20px; 
    position: relative; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
} 

.tree li { 
    float: left; 
    list-style-type: none; 
    position: relative; 
    padding: 20px 5px 0 5px; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
} 

.tree li::before, 
.tree li::after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 50%; 
    border-top: 1px solid #ccc; 
    width: 50%; 
    height: 20px; 
} 

.tree li::after { 
    right: auto; 
    left: 50%; 
    border-left: 1px solid #ccc; 
} 

.tree li:only-child::after, 
.tree li:only-child::before { 
    display: none; 
} 

.tree li:only-child { 
    padding-top: 0; 
} 

.tree li:first-child::before, 
.tree li:last-child::after { 
    border: 0 none; 
} 

.tree li:last-child::before { 
    border-right: 1px solid #ccc; 
    border-radius: 0 5px 0 0; 
    -webkit-border-radius: 0 5px 0 0; 
    -moz-border-radius: 0 5px 0 0; 
} 

.tree li:first-child::after { 
    border-radius: 5px 0 0 0; 
    -webkit-border-radius: 5px 0 0 0; 
    -moz-border-radius: 5px 0 0 0; 
} 

.tree ul ul::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    border-left: 1px solid #ccc; 
    width: 0; 
    height: 20px; 
} 

.tree li div:hover, 
.tree li div:hover+ul li div { 
    background: #c8e4f8; 
    color: #000; 
    !border: 1px solid #94a0b4; 
} 

.tree li div:hover + ul li::after, 
.tree li div:hover + ul li::before, 
.tree li div:hover + ul::before, 
.tree li div:hover + ul ul::before { 
    border-color: #94a0b4; 
} 

.emplist { 
    width: 320px !important; 
    height: 160px !important; 
    border: 1px solid #aaa; 
    border-radius: 5px; 
    color: #333; 
    transition: box-shadow 1s; 
    position: relative; 
    cursor: move; 
} 

.tree img { 
    width: 55px; 
    !height: 75px; 
    margin: 0 auto; 
} 

.emplist h3, 
.emplist p { 
    padding: 5px 0px 0px 5px !important; 
    margin: 0px !important; 
} 

.emplist:hover { 
    box-shadow: 0 0 8px #000; 
} 

.emplist h3 { 
    font-size: 14px; 
} 

.deptRow, 
.infoRow { 
    width: 100%; 
    height: 20%; 
    float: left; 
    font-family: 'Rubik', sans-serif !important; 
    color: #00aff0; 
} 

.detailsRow { 
    float: left; 
    width: 100%; 
    height: 55%; 
} 

.detailsCol, 
.imgCol, 
.infoMore { 
    float: left; 
    height: 100%; 
} 

.detailsCol { 
    width: 69%; 
} 

.imgCol { 
    width: 30%; 
} 

.imgCol img { 
    border: 1px solid #ccc; 
    margin: 5px; 
} 

.infoMore, 
.infoMoreR { 
    width: 50%; 
    font-size: 12px; 
} 

.R a { 
    margin: 5px; 
} 

.empName { 
    font-family: 'Josefin Sans', sans-serif; 
} 

.subTitle { 
    !font-family: 'Bilbo', cursive; 
    !text-align: right; 
    padding-right: 20px; 
    font-weight: 880px; 
    font-family: 'Dekko', cursive; 
}

HTML-Code

<div id="" class="tree"> 
    <ul> 
    <li> 
     <div class='emplist'> 
     <div class='deptRow'> 
      <h3>Research & Development</h3> 
     </div> 
     <hr> 
     <div class='detailsRow'> 
      <div class='detailsCol'> 
      <h3 class='empName'>Emp1</h3> 
      <p class='subTitle'>Research & Development 
       <br/>Hyderabad</p> 
      </div> 
      <div class='imgCol'><img src='' alt='abc' /></div> 
     </div> 
     <hr> 
     <div class='infoRow'> 
      <div class='infoMoreR pull-right text-right'> 
      <button id='btn_empModal' data-toggle='modal' class='btn btn-xs text-center'>info</button> 
      </div> 
      <div class='infoMore'> 
      <p id='leafCount'></p> 
      </div> 
     </div> 
     </div> 
     <ul> 
     <li> 
      <div class='emplist'> 
      <div class='deptRow'> 
       <h3>emp2</h3> 
      </div> 
      <hr> 
      <div class='detailsRow'> 
       <div class='detailsCol'> 
       <h3 class='empName'></h3> 
       <p class='subTitle'>Research & Development 
        <br>Hyderabad</p> 
       </div> 
       <div class='imgCol'><img src='' alt='abc' /></div> 
      </div> 
      <hr> 
      <div class='infoRow'> 
       <div class='infoMoreR pull-right text-right'> 
       <button id='btn_empModal' data-toggle='modal' class='btn btn-xs text-center'>info</button> 
       </div> 
       <div class='infoMore'> 
       <p id='leafCount'></p> 
       </div> 
      </div> 
      </div> 
      <ul> 
      <li> 
       <div class='emplist'> 
       <div class='deptRow'> 
        <h3>Research & Development</h3> 
       </div> 
       <hr> 
       <div class='detailsRow'> 
        <div class='detailsCol'> 
        <h3 class='empName'>emp2.1</h3> 
        <p class='subTitle'>Research & Development 
         <br>Hyderabad</p> 
        </div> 
        <div class='imgCol'><img src='' alt='abc' /></div> 
       </div> 
       <hr> 
       <div class='infoRow'> 
        <div class='infoMoreR pull-right text-right'> 
        <button id='btn_empModal' data-toggle='modal' class='btn btn-xs text-center'>info</button> 
        </div> 
        <div class='infoMore'> 
        <p id='leafCount'></p> 
        </div> 
       </div> 
       </div> 
       <ul> 
       <li> 
        <div class='emplist'> 
        <div class='deptRow'> 
         <h3>Research & Development</h3> 
        </div> 
        <hr> 
        <div class='detailsRow'> 
         <div class='detailsCol'> 
         <h3 class='empName'>emp2.1.1</h3> 
         <p class='subTitle'>Research & Development 
          <br>Hyderabad</p> 
         </div> 
         <div class='imgCol'><img src='' alt='abc' /></div> 
        </div> 
        <hr> 
        <div class='infoRow'> 
         <div class='infoMoreR pull-right text-right'> 
         <button id='btn_empModal' data-toggle='modal' class='btn btn-xs text-center'>info</button> 
         </div> 
         <div class='infoMore'> 
         <p id='leafCount'></p> 
         </div> 
        </div> 
        </div> 
       </li> 
       <li> 
        <div class='emplist'> 
        <div class='deptRow'> 
         <h3>Research & Development</h3> 
        </div> 
        <hr> 
        <div class='detailsRow'> 
         <div class='detailsCol'> 
         <h3 class='empName'>emp2.1.2</h3> 
         <p class='subTitle'>Research & Development 
          <br>Hyderabad</p> 
         </div> 
         <div class='imgCol'><img src='' alt='abc' /></div> 
        </div> 
        <hr> 
        <div class='infoRow'> 
         <div class='infoMoreR pull-right text-right'> 
         <button id='btn_empModal' data-toggle='modal' class='btn btn-xs text-center'>info</button> 
         </div> 
         <div class='infoMore'> 
         <p id='leafCount'></p> 
         </div> 
        </div> 
        </div> 
       </li> 
       </ul> 
      </li> 
      <li> 
       <div class='emplist'> 
       <div class='deptRow'> 
        <h3>Research & Development</h3> 
       </div> 
       <hr> 
       <div class='detailsRow'> 
        <div class='detailsCol'> 
        <h3 class='empName'>emp2.2</h3> 
        <p class='subTitle'>Research & Development 
         <br>Hyderabad</p> 
        </div> 
        <div class='imgCol'><img src='' alt='abc' /></div> 
       </div> 
       <hr> 
       <div class='infoRow'> 
        <div class='infoMoreR pull-right text-right'> 
        <button id='btn_empModal' data-toggle='modal' class='btn btn-xs text-center'>info</button> 
        </div> 
        <div class='infoMore'> 
        <p id='leafCount'></p> 
        </div> 
       </div> 
       </div> 
       <ul> 
       <li> 
        <div class='emplist'> 
        <div class='deptRow'> 
         <h3>Research & Development</h3> 
        </div> 
        <hr> 
        <div class='detailsRow'> 
         <div class='detailsCol'> 
         <h3 class='empName'>emp2.2.1</h3> 
         <p class='subTitle'>Research & Development 
          <br>Hyderabad</p> 
         </div> 
         <div class='imgCol'><img src='' alt='abc' /></div> 
        </div> 
        <hr> 
        <div class='infoRow'> 
         <div class='infoMoreR pull-right text-right'> 
         <button id='btn_empModal' data-toggle='modal' class='btn btn-xs text-center'>info</button> 
         </div> 
         <div class='infoMore'> 
         <p id='leafCount'></p> 
         </div> 
        </div> 
        </div> 
       </li> 
       <li> 
        <div class='emplist'> 
        <div class='deptRow'> 
         <h3>Research & Development</h3> 
        </div> 
        <hr> 
        <div class='detailsRow'> 
         <div class='detailsCol'> 
         <h3 class='empName'>emp2.2.2</h3> 
         <p class='subTitle'>Research & Development 
          <br>Hyderabad</p> 
         </div> 
         <div class='imgCol'><img src='' alt='abc' /></div> 
        </div> 
        <hr> 
        <div class='infoRow'> 
         <div class='infoMoreR pull-right text-right'> 
         <button id='btn_empModal' data-toggle='modal' class='btn btn-xs text-center'>info</button> 
         </div> 
         <div class='infoMore'> 
         <p id='leafCount'></p> 
         </div> 
        </div> 
        </div> 
       </li> 
       </ul> 
      </li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</div>

Was die Änderungen erforderlich obigen Code sind. Antworte mir so schnell wie möglich.

Quelle

2017-06-22 nani0077

Antwort

1 
.emplist { 
    width: 320px !important; 
    height: 160px !important; 
    border: 1px solid #aaa; 
    border-radius: 5px; 
    color: #333; 
    transition: box-shadow 1s; 
    position: relative; 
    cursor: move; 
}

oben Klasse Block Ersetzen durch unter

.emplist{ 
    width: 320px !important; 
    height: 160px !important; 
    border: 1px solid #aaa; 
    border-radius: 5px; 
    color: #333; 
    transition: box-shadow 1s; 
    position: relative; 
    cursor: move; 
    display: inline-block;  
}

gerade angezeigt Eigenschaft hinzugefügt wird

Quelle

2017-07-26 11:45:13 user8369744

1

Fügen Sie dies der letzten Zeile Ihres CSS hinzu.

Das Problem ist, dass der Rand in Ihrem CSS auf "0px" festgelegt ist Ziehen Sie in Betracht, den linken Rand und den rechten Rand bei Bedarf auf "auto" zu ändern.

Quelle

2017-06-22 11:33:50

Verwandte Themen

 Verwandte Themen