2017-12-19 23 views
0

私は、家系図の同じ程度に各支店から1人だけを見せたいと思います。 CSSの知識はあまり良くありません。 float:leftまたはdisplay: inline-blockを使用していますが、ツリーは下に表示されます。私のミスはどこですか?多くのdivをCSSの家系図で並べて表示するには?

Fiddle Demo

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    min-height: 100vh; 
 
    font-family: 'Times New Roman', Arial; 
 
    font: 10px; 
 
} 
 

 
#container { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
} 
 

 
.tree { 
 
    width: 100%; 
 
    padding-top: 20px; 
 
    position: relative; 
 
    float: left; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
} 
 

 
.tree img { 
 
    display: block; 
 
    margin: 0 auto; 
 
    margin-bottom: 1rem; 
 
    width: 80px; 
 
} 
 

 
.tree ul { 
 
    padding-top: 20px; 
 
    position: relative; 
 
    display: inline-block; 
 
    float: left; 
 
    margin: 0; 
 
} 
 

 
.tree li { 
 
    float: left; 
 
    text-align: center; 
 
    list-style-type: none; 
 
    position: relative; 
 
    padding: 20px 5px 0 5px; 
 
    margin: 0; 
 
} 
 

 
.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; 
 
} 
 

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

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

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

 
.tree ul div { 
 
    border: 1px solid #ccc; 
 
    padding: 5px; 
 
    text-decoration: none; 
 
    width: min-content; 
 
    color: #666; 
 
    font-size: 11px; 
 
    display: inline-block; 
 
    border-radius: 5px; 
 
    transition: all 0.5s; 
 
} 
 

 
@media all and (max-width: 1475px) { 
 
    .tree { 
 
    width: 100%; 
 
    padding-top: 20px; 
 
    position: absolute; 
 
    float: left; 
 
    } 
 
}
<div id="container"> 
 
    <ul class="tree"> 
 
    <li> 
 
     <div>OFFICES</div> 
 
     <ul> 
 
     <li> 
 
      <ul class="tree"> 
 
      <li> 
 
       <div>Center</div> 
 
       <ul> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 1<br> Person Name 1 
 
         <br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 2<br> Person Name 2<br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 3<br> Person Name 3<br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 5<br> 
 
         <br> 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 6<br> Person Name 6 
 
         <br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 7<br> Person Name 7 
 
         <br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 8<br> 
 
         <br> 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="”" width="100"></a>Directorate 9<br> Person Name 9 
 
         <br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 10<br> Person Name 10 
 
         <br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 11<br> 
 
         <br> 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 12<br> Person Name 12 
 
         <br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 13<br> Person Name 13 
 
         <br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 14<br> 
 
         <br> 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 15<br> 
 
         <br> 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 16<br> Person Name 16 
 
         <br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 17<br> 
 
         <br> 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 18<br> 
 
         <br> 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 19<br> Person Name 19 
 
         <br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 20<br> Person Name 20 
 
         <br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 21<br> Person Name 21<br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 22<br> 
 
         <br> 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 23<br> 
 
         <br> 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
</div>

+0

してみてください:// CS s-tricks.com/snippets/css/a-guide-to-flexbox/。 –

+0

ID **は一意である必要があります – j08691

+0

@NanduKalidindiありがとうございます。今回はディスプレイを追加します:フレックス、最初と2番目の子供(名前:センター)が親(名前:オフィス)から離れました。これをどうすれば解決できますか? [Demo2](https://jsfiddle.net/code4/n80cprd0/3/) – code4ever

答えて

1

はあなたにHTTPSを助けるかもしれないflexboxesを使用してdisplay: flex/inline-flex;

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    min-height: 100vh; 
 
    font-family: 'Times New Roman', Arial; 
 
    font: 10px; 
 
} 
 

 
#container { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
} 
 

 
.container .tree { 
 
    width: 100%; 
 
    padding-top: 20px; 
 
    position: relative; 
 
    
 
} 
 
.container .tree > li { 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
.tree img { 
 
    display: block; 
 
    margin: 0 auto; 
 
    margin-bottom: 1rem; 
 
    width: 80px; 
 
} 
 

 
.tree ul { 
 
    padding-top: 20px; 
 
    position: relative; 
 
    display: inline-flex; 
 
    margin: 0; 
 
} 
 

 
.tree li { 
 
    float: left; 
 
    text-align: center; 
 
    list-style-type: none; 
 
    position: relative; 
 
    padding: 20px 5px 0 5px; 
 
    margin: 0; 
 
} 
 

 
.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; 
 
} 
 

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

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

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

 
.tree ul div { 
 
    border: 1px solid #ccc; 
 
    padding: 5px; 
 
    text-decoration: none; 
 
    width: min-content; 
 
    color: #666; 
 
    font-size: 11px; 
 
    display: inline-block; 
 
    border-radius: 5px; 
 
    transition: all 0.5s; 
 
} 
 

 
@media all and (max-width: 1475px) { 
 
    .tree { 
 
    width: 100%; 
 
    padding-top: 20px; 
 
    position: absolute; 
 
    float: left; 
 
    } 
 
}
<div id="container"> 
 
    <ul class="tree"> 
 
    <li> 
 
     <div>OFFICES</div> 
 
     <ul> 
 
     <li> 
 
      <ul class="tree"> 
 
      <li> 
 
       <div>Center</div> 
 
       <ul> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 1<br> Person Name 1 
 
         <br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 2<br> Person Name 2<br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 3<br> Person Name 3<br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 5<br> 
 
         <br> 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 6<br> Person Name 6 
 
         <br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 7<br> Person Name 7 
 
         <br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 8<br> 
 
         <br> 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="”" width="100"></a>Directorate 9<br> Person Name 9 
 
         <br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 10<br> Person Name 10 
 
         <br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 11<br> 
 
         <br> 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 12<br> Person Name 12 
 
         <br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 13<br> Person Name 13 
 
         <br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 14<br> 
 
         <br> 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 15<br> 
 
         <br> 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 16<br> Person Name 16 
 
         <br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 17<br> 
 
         <br> 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 18<br> 
 
         <br> 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 19<br> Person Name 19 
 
         <br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 20<br> Person Name 20 
 
         <br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 21<br> Person Name 21<br> Degree 1 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 22<br> 
 
         <br> 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <ul class="tree"> 
 
        <li> 
 
         <div> 
 
         <a id="hypPerson" href=""> 
 
          <img alt="Image" height="100" src="" width="100"></a>Directorate 23<br> 
 
         <br> 
 
         </div> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
</div>

関連する問題