handlerbars.js模板中的递归HTML div

我试图找出如何严格地用div创建递归单元

根模板将是（1）。（2）图是（1）中红色矩形的展开图

如何使用html/css而不使用引导实现这一点？谢谢

给你

<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>

.main{高度：自动；页边距底部：40px；}
#第一个{边框：1px实心#000；}
#第二个{边框：1px实心红色；}
.clear{clear:两者；}
.box{边距：10px；最小高度：50px；}
.小{宽度：48%；浮动：左；边框：1px实心#000；}
.大{宽度：98%；边框：1px纯红色；}

您能先告诉我们您在递归什么吗？dom元素本身？元素的样式？或者两者都有？对于任何递归，都必须有一些终端条件，否则就会出现“堆栈溢出”。那么你的终末状态是什么？它有一定的深度吗？还有，你是不是在试图避免使用javascript？请注意，HTML元素本身是静态的——您只能获得在代码中手动声明的内容。没有javascript，他们无法修改自己或添加更多元素。感谢@naveed ramzan的回复。这似乎不起作用：嗯，我起草这本书是为了给你一个想法。不过我还是更新了，你可以试着自我提高。：）