使嵌套的 div 看起来像 css 中的列

Question

例如，我有嵌套的div表示生命之树数据

<div>
    Hominidae
    <div>
        Pan
        <div>
            Chimpanzee
        </div>
        <div>
            Bonobo
        </div>
    </div>
    <div>
        Homo
        <div>
            Sapiens
        </div>
    </div>
</div>

我想让它看起来像列中的一棵树，即。

Hominidae    Pan    Chimpanzee
                    Bonobo
             Homo   Sapiens

我

设想了几种解决方案，特别是三个真正的列和一个网格，但我有一种感觉，只要我更擅长 CSS，一点点 CSS 就会使这个解决方案更有效率。其他解决方案都有添加更多JS逻辑的缺点。

Answer 1

div{
  width: 400px;
  background: #bbb;
}
div div{
  width: 60%;
  float: right;
  background: rgba(255, 0, 0, .3);
}

<div>
  Hominidae
  <div>Pan
    <div>Chimpanzee</div>
    <div>Bonobo</div>
  </div>
  <div>Homo
    <div>Sapiens</div>
  </div>
</div>

Answer 2

您可以使用

CSS grid

div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
div>div {
  grid-column: 2;
}

<div>
  Hominidae
  <div>
    Pan
    <div>
      Chimpanzee
    </div>
    <div>
      Bonobo
    </div>
  </div>
  <div>
    Homo
    <div>
      Sapiens
    </div>
  </div>
</div>

Answer 3

.container1 {
  float:right; width: 100%
}
.container2 {
  float:right; width: 60%
}
.container3 {
  float:right; width: 50%
}

<div class ="container1">
Hominidae
  <div class ="container2">
  Pan
    <div class ="container3">
    Chimpanzee
    </div>
    <div class ="container3">
    Bonobo
    </div>
  </div>
  <div class ="container2">
  Homo
    <div class ="container3">
    Sapiens
    </div>
  </div>
</div>

Answer 4

div {
display:flex;    
    }
    
div div{
width:100px;
display:inline-block;
}

<div>
  <div>Hominidae</div>
  <div>        
    <div>Pan</div>
    <div></div>
    <div>Homo</div>            
  </div>
  <div>        
    <div>Chimpanzee</div>
    <div>Bonobo</div>
    <div>Sapiens</div>
  </div>
</div>