2017-04-26 163 views
0

我在網上發現了一個基本的組織結構圖,並對自己的部分內容進行了修改,以包含化身泡沫。我現在有兩個問題我無法弄清楚。任何幫助將非常感激。CSS組織結構圖

這裏是我的代碼

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.tree { 
 
    text-align: center; 
 
    padding-left: 10px; 
 
} 
 

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

 
.tree li { 
 
    float: left; 
 
    text-align: center; 
 
    list-style-type: none; 
 
    position: relative; 
 
    padding: 15px 0px 0px 60px; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
} 
 

 

 
/*We will use ::before and ::after to draw the connectors*/ 
 

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

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

 

 
/*Remove left-right connectors from elements without any siblings*/ 
 

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

 

 
/*Remove space from the top of single children*/ 
 

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

 

 
/*Remove left connector from first child and right connector from last child*/ 
 

 
ul.first li.first::before, 
 
ul.first li.first::after { 
 
    border: 0 none; 
 
} 
 

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

 

 
/*Adding back the vertical connector to the last nodes*/ 
 

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

 

 
/*Time to add downward connectors from parents*/ 
 

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

 
.tree li .box { 
 
    border: 1px solid #ccc; 
 
    padding: 5px 10px 5px 0px; 
 
    text-decoration: none; 
 
    color: #666; 
 
    font-family: arial, verdana, tahoma; 
 
    font-size: 12px; 
 
    display: inline-block; 
 
    border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    transition: all .5s; 
 
    -webkit-transition: all .5s; 
 
    -moz-transition: all .5s; 
 
} 
 

 

 
/*Hover effects*/ 
 

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

 

 
/*Connector styles on hover*/ 
 

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

 

 
/*Avatar bubbles*/ 
 

 
.avatar { 
 
    position: relative; 
 
    top: 0px; 
 
    left: -35px; 
 
    width: 75px; 
 
    height: 75px; 
 
    margin-right: -30px; 
 
    background-size: cover; 
 
    background-color: #fff; 
 
    background-image: url("temp.jpg"); 
 
    float: left; 
 
    border: .5px solid #94a0b4; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
}
<div class="tree"> 
 
    <ul class="first"> 
 
    <li class="first techops"><span class="box"><div class="avatar"></div>Department Area Name<br><strong>Director</strong><br><br>John Smith</span> 
 
     <ul> 
 
     <li><span class="box"><div class="avatar"></div>Manager<br/>Jane Smith</span> 
 
      <ul> 
 
      <li><span class="box"><div class="avatar"></div>Team Leader<br/>John Doe</span> 
 
       <ul> 
 
       <li><span class="box"><div class="avatar"></div>Next Title<br/>Next Name</span></li> 
 
       </ul> 
 
      </li> 
 
      <li><span class="box"><div class="avatar"></div>Team Leader<br/>Jane Doe</span> 
 

 
      </li> 
 
      <li><span class="box"><div class="avatar"></div>Team Leader<br/>Jeff Doe</span> 
 
       <li><span class="box"><div class="avatar"></div>Team Leader</span></li> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><span class="box"><div class="avatar"></div>Manager 2</span> 
 
      <ul> 
 
      <li><span class="box"><div class="avatar"></div>Name 3</span></li> 
 
      <li><span class="box"><div class="avatar"></div>Name 4</span></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

的第一個問題是,線分解時,他們不適合在頁面上,所以它看起來奇怪,你可以看到這裏的「經理2」應該是在同一行「經理簡·史密斯」,但它打破

enter image description here

理想情況下,我寧願讓它根據需要擴展右窗格。如果一行有20-30個孩子,那麼溢出應該能夠根據需要滾動到右側。我經常遇到的問題是:相對(我認爲),否則它不能正確排列。

第二個問題,我似乎無法弄清楚是如何讓文字停止在<br/>之後的單詞包裝。這個例子是在「下一個標題,下一個名稱」之一。如您所見,它會在「下一步」之後立即刪除「名稱」。理想情況下,我希望它全部在一行中。我很確定這是導致它的<br/>。如果你看第一個,「部門區域名稱」在<br/>之前,它不在那裏。

再次感謝您提供的任何見解。

回答

0

如果不使用浮動,而是改變lidisplay:inline-block;,則可以確保該li不加white-space:nowrapul包裹。

然後您需要添加white-space:normalli所以裏面的文字可以包裝,然後添加vertical-align:top它,因此,如果一棵樹有更多的孩子,那麼他們將正確對齊彼此相鄰:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.tree { 
 
    text-align: center; 
 
    padding-left: 10px; 
 
} 
 

 
.tree ul { 
 
    display: block; 
 
    white-space: nowrap; 
 
    padding-top: 15px; 
 
    position: relative; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
} 
 

 
.tree li { 
 
    vertical-align:top; 
 
    display: inline-block; 
 
    white-space: normal; 
 
    text-align: center; 
 
    list-style-type: none; 
 
    position: relative; 
 
    padding: 15px 0px 0px 60px; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
} 
 

 

 
/*We will use ::before and ::after to draw the connectors*/ 
 

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

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

 

 
/*Remove left-right connectors from elements without any siblings*/ 
 

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

 

 
/*Remove space from the top of single children*/ 
 

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

 

 
/*Remove left connector from first child and right connector from last child*/ 
 

 
ul.first li.first::before, 
 
ul.first li.first::after { 
 
    border: 0 none; 
 
} 
 

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

 

 
/*Adding back the vertical connector to the last nodes*/ 
 

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

 

 
/*Time to add downward connectors from parents*/ 
 

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

 
.tree li .box { 
 
    border: 1px solid #ccc; 
 
    padding: 5px 10px 5px 0px; 
 
    text-decoration: none; 
 
    color: #666; 
 
    font-family: arial, verdana, tahoma; 
 
    font-size: 12px; 
 
    display: inline-block; 
 
    border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    transition: all .5s; 
 
    -webkit-transition: all .5s; 
 
    -moz-transition: all .5s; 
 
} 
 

 

 
/*Hover effects*/ 
 

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

 

 
/*Connector styles on hover*/ 
 

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

 

 
/*Avatar bubbles*/ 
 

 
.avatar { 
 
    position: relative; 
 
    top: 0px; 
 
    left: -35px; 
 
    width: 75px; 
 
    height: 75px; 
 
    margin-right: -30px; 
 
    background-size: cover; 
 
    background-color: #fff; 
 
    background-image: url("temp.jpg"); 
 
    float: left; 
 
    border: .5px solid #94a0b4; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
}
<div class="tree"> 
 
    <ul class="first"> 
 
    <li class="first techops"> 
 
     <span class="box"> 
 
     <div class="avatar"></div> 
 
     Department Area Name<br> 
 
     <strong>Director</strong><br><br>John Smith 
 
     </span> 
 
     <ul> 
 
     <li><span class="box"><div class="avatar"></div>Manager<br/>Jane Smith</span> 
 
      <ul> 
 
      <li><span class="box"><div class="avatar"></div>Team Leader<br/>John Doe</span> 
 
       <ul> 
 
       <li><span class="box"><div class="avatar"></div>Next Title<br/>Next Name</span></li> 
 
       </ul> 
 
      </li> 
 
      <li><span class="box"><div class="avatar"></div>Team Leader<br/>Jane Doe</span></li> 
 
      <li><span class="box"><div class="avatar"></div>Team Leader<br/>Jeff Doe</span></li> 
 
      <li><span class="box"><div class="avatar"></div>Team Leader</span></li> 
 
      </ul> 
 
     </li> 
 

 
     <li><span class="box"><div class="avatar"></div>Manager 2</span> 
 
      <ul> 
 
      <li><span class="box"><div class="avatar"></div>Name 3</span></li> 
 
      <li><span class="box"><div class="avatar"></div>Name 4</span></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

+0

謝謝皮特。浮子爲溢出工作。但是如果中場休息前的文字不足以擴大禁區的話,休息後的文字仍然會丟掉下一個字。也許有一個br的語法? – Chester

+0

@徹斯特對不起,不知道你的意思是 - 你想讓箱子內的文字不要包裹?如果是這樣的話,只需用一層nowrap包裝它們並使該類爲'white-space:nowrap' - 例如'名稱4不應該包裝' – Pete

+0

謝謝,我會給下次嘗試我的電腦時嘗試一下。但是,基本上我希望文字不要掉線。我不想要的一個例子是第二行,「經理」名字「簡史密斯」,史密斯部分下降。 – Chester