css - 使嵌套的 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>