Javascript Dynamicly创建的元素，每行仅保留2个div

在我的代码中，动态地创建div，我希望在一行中只保留2个div。 有时我得到6或7分。我怎么能只做两个div的i一行

我需要使2 div内联，然后添加新行，然后再次2 div内联和新行

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

colorList+=”；
$.each（数组、函数（索引、值）{
颜色列表+=“”+值+“”；
});
颜色列表+=”；

这可以通过三种方式完成

将父元素的宽度减少到两个.productColor元素的宽度

将.productColor的宽度设置为50%

通过检查每个$的索引添加

标记

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

if（（索引+1）%2==0&&index>0）
{
颜色列表+=“
”
}

colorList+=”；
$.each（数组、函数（索引、值）{
颜色列表+=“”+值+“”；
如果（（索引+1）%2==0）{
颜色列表+='
'
}
});
颜色列表+=”；

我建议插入一个“”来为您清除空间，而不是使用

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

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

---

请解释“如何在一行中只生成两个div”的意思。您的意思是，只有两个带display

inline block

的内部div，对吗？您正在使用$。each（）函数，因此您将创建这么多div作为数组元素。设置内部div css width:50%和float:left；并将主div宽度设置为100%或1000pxetc@pala我想让2个div内联，然后是新行。

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

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