javascript - 在模板列表中创建段落

Question

我使用 javascript、css 和 html 来输出以下示例。

实际上，输出将通过 smarty 'foreach' 和一个数组创建，但这不适用于 jsfiddle。

我的问题是，我怎样才能意识到在第二个输出行之后会生成一个用于横幅、文本等的分隔符 div？

我的示例中的框是固定的，因此在更大的屏幕分辨率下，每行将显示 4 个框，在某些较小的框中仅显示 3 个框。

我认为它只能在 javascript 下工作，但我不知道。

我很感谢任何建议

这是jsfiddle的链接

CSS 代码：

#main { width: 100%; padding: 5px; }
article { margin-left: 20px; margin-bottom: 20px; width: 200px;
          height: 200px; border: 1px solid #000; padding: 3px; float: left; }

HTML 代码

<div id="main"></div>

用 Smarty {forech} 模拟 JavaScript

function test(){
  for(var i=1;i<=12;i++){
     print('Test');
  }
}

var r = document.getElementById('main');

function print(s){
  r.innerHTML += '<article>test</article>';
}

test();

标签： javascripthtmlcss