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

Question

在我的代码中创建动态div，我想在一行中只保留2个div。 有时我会得到6或7。我怎么能只让2个div成为一行？

我需要内联2 div然后添加新行然后再添加2 div in line和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. 将.Productcolours的宽度设置为50％

3. 通过检查$ .each

   中的索引来添加<br>标记

   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/>，而是插入一个可以为您清空空间的''。

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

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
    */
}