0
가계도에서 같은 지점에있는 각 지점에서 단 한 사람 만 보여주고 싶습니다. CSS 지식은별로 좋지 않습니다. float:left 또는 display: inline-block을 사용하지만 트리가 아래쪽으로 나타납니다. 내 실수는 어디 갔지?CSS 본문 트리에서 여러 div를 나란히 표시하는 방법은 무엇입니까?
* {
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>
시도 : // CS s-tricks.com/snippets/css/a-guide-to-flexbox/. –
ID ** ** 고유해야 함 – j08691
감사합니다. @ NanduKalidindi하지만 이번에는 디스플레이를 추가 할 때 : 첫 번째 및 두 번째 자식 (이름 : 센터)이 부모 (이름 : 사무실)에서 벗어났습니다. 이 문제를 어떻게 해결할 수 있습니까? [Demo2] (https://jsfiddle.net/code4/n80cprd0/3/) – code4ever