javascript - 动态创建的元素，每行只保留 ​​2 个 div

Question

在我的代码中动态创建了 div，我只想在一行中保留 2 个 div。有时我得到 6 或 7 。我怎样才能只制作 2 div 的 i 一行？？

我需要制作 2 div inline 然后添加新行，然后再添加 2 div inline 和 new line 。

colorList += "<div>";
$.each(array, function( index, value ) {
    colorList += "<div id='" + value + "' class='Productcolours' style='background-color:" + value + "; display: inline-block;'>" + value + "</div>";
});
colorList += "</div>";

Answer 1

这可以通过 3 种方式完成

1. 将父元素的宽度减小到两个 .Productcolours 元素的宽度
2. 将 .Productcolors 的宽度设置为 50%

3. <br>通过检查 $.each 中的索引来添加标签

   if((index+1)%2==0 && index > 0)
   {
      colorList += "<br>"
   }
   

Answer 2

colorList += "<div>";
$.each(array, function( index, value ) {
    colorList += "<div id='" + value + "' class='Productcolours' style='background-color:" + value + "; display: inline-block;'>" + value + "</div>";

if( (index+1) % 2 == 0 ){
    colorList += '<br />' 
}

});
colorList += "</div>";

Answer 3

<br/>我建议不要使用 a ，而是插入一个 '' 可以为您清除空间。

如果您希望做更多而不是行之间的单个换行符，它也会有所帮助。因此，它提供了更可控的设计：

colorList += "<div>";
$.each(array, function( index, value ) {
    colorList += "<div id='" + value + "' class='Productcolours' style='background-color:" + value + "; display: inline-block;'>" + value + "</div>";

    if( (index+1) %2 == 0) {
        colorList += "<div class='clearLine'></div>";
    }
});
colorList += "</div>";

在 CSS 中，您可以添加：

.clearLine {
    margin: 5px 0;
    /* or whatever you like to mark a clean space
        or additional decorations
    */
}