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

Question

I have nested divs representing tree of life data, for example

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

I would like to make this look like a tree in columns ie.

Hominidae    Pan    Chimpanzee
                    Bonobo
             Homo   Sapiens

I envisioned several solutions, in particular, three real columns and a grid, but I have a feeling just a little bit of CSS would make this solution the more efficient, if only I were more competent in CSS. The other solutions each had the drawback of adding way more JS logic.

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

You can use CSS grid for this

 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>