handlerbars.js模板中的递归HTML Div

Question

我正试图弄清楚如何严格地从div中创建递归单元。

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

如何使用html / css和没有bootstrap来实现这一点？谢谢。

Answer 1

你走了。

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