Rekursive HTML Divs in handlerbars.js Vorlagen

Question

Ich versuche herauszufinden, wie rekursive Einheiten streng aus divs zu erstellen.

Die Stammvorlage wäre (1). Das (2) Diagramm ist die Erweiterung des roten Rechtecks ​​in (1).

Wie wäre es möglich, dies mit HTML/CSS und ohne Bootstrap zu erreichen? Vielen Dank.

Answer 1

Hier gehen Sie.

<div> 
    <div id="first" class="main"> 
     <div class="box small"></div> 
     <div class="box small"></div> 
     <div class="clear"></div> 
     <div class="box large"></div> 
    </div> 

    <div id="second" class="main"> 
     <div class="box large"></div> 
     <div class="clear"></div> 
     <div class="box small"></div> 
     <div class="box small"></div> 
    </div> 
</div> 
<style> 
.main{height: auto; margin-bottom:40px;} 
#first{border:1px solid #000; } 
#second{border:1px solid red;} 
.clear{clear:both;} 
.box{margin: 10px; min-height: 50px;} 
.small{width:48%; float:left; border:1px solid #000;} 
.large{width:98%; border:1px solid red;} 
</style>