如何在我的内嵌块JavaScript div之间添加换行符？

我的目标是使用html/javascript在一个大型变量网格中显示切片。我设法用下面的代码在内联块中显示div，但我似乎无法获得换行符。例如，在每10个瓷砖之后，我想要开始一个新行。这将创建一个10×10的网格。如何在我的内嵌块JavaScript div之间添加换行符？

function cdiv() { 
    var div = document.createElement("div"); 
    div.style.width = "100px"; 
    div.style.height = "100px"; 
    div.style.background = "red"; 
    div.style.color = "white"; 
    div.style.display = "inline-block" 
    div.innerHTML = 'hello'; 

    document.body.appendChild(div); 
} 

for (i = 0; i < 10; i++) { 

    for (b = 0; b < 10; b++) { 
    cdiv(); 
    } 
}

我会很感激奖金提示，以便如何给这些div的每一个独特的ID进一步修补。

来源

2016-06-08 hac13

'document.body.appendChild（document.createElement（“br”））'？ https://jsfiddle.net/45381qx9/ – 2016-06-08 02:02:34

我和你现在的代码完全一样，但它不适合我。你的是完美的。 https://jsfiddle.net/45381qx9/ – hac13

这可以用css完成 – charlietfl

内环之后，附加一个断开线“BR”

for (i = 0; i < 10; i++) { 
    for (b = 0; b < 10; b++) { 
    cdiv(); 
    } 
    //Append line break here...  
    document.body.appendChild(document.createElement("br")); //Thanks Squint hint as well 
}

来源

2016-06-08 02:14:58 Sami

<html> 
 
<head> 
 
    <script> 
 
function cdiv() { 
 
    var div = document.createElement("div"); 
 
    div.style.width = "100px"; 
 
    div.style.height = "100px"; 
 
    div.style.background = "red"; 
 
    div.style.color = "white"; 
 
    div.style.display = "inline-block" 
 
    div.innerHTML = 'hello'; 
 

 
    document.body.appendChild(div); 
 
    
 
} 
 
</script> 
 
    </head> 
 
    <body> 
 
    <script> 
 
for (i = 0; i < 10; i++) { 
 
document.body.appendChild(document.createElement("br")); 
 
    for (b = 0; b < 10; b++) { 
 
cdiv(); 
 
} 
 
} 
 
</script> 
 
    </body> 
 
    </html>

document.body.appendChild(document.createElement("br"));使用这条线在你的第一个循环加休息。

来源

2016-06-08 02:12:20

我试过，因为@squint上面已经建议，但它没有奏效。他的方法是在内部循环完成后添加断点线的地方 – hac13

一种方法是封装所有的div在具有每格的宽度的10倍的容器。请参考下面的代码和这个小提琴。 https://jsfiddle.net/5uc2nc3p/2/

function cdiv(ele) { 
    var div = document.createElement("div"); 
    div.style.width = "100px"; 
    div.style.height = "100px"; 
    div.style.background = "red"; 
    div.style.color = "white"; 
    div.style.display = "inline-block" 
    div.innerHTML = 'hello'; 

ele.appendChild(div); 
} 

var div = document.createElement("div"); 
div.style.width = "1000px"; ///10 times of inner divs 
div.style["overflow-y"]= "visible"; // to show overflow 
document.body.appendChild(div); 
for (i = 0; i < 10; i++) { 
    for (b = 0; b < 10; b++) { 
    cdiv(div); 
    } 
}

来源

2016-06-08 02:21:13 Don

在jfiddle上，我看到这些图块水平延伸过页面视图，这正是我想要的。但是，当我在我的索引文件中尝试大量拼贴并用chrome打开它时，我没有发生滚动。相反，我会看到适合我的页面的瓷砖线，不会越过它。我希望有一个完美的方格。 – hac13

你有没有尝试设置溢出到可见的容器div或身体？ – Don

对不起，我不知道该怎么做，但现在正在寻找。如果你有一个很好的链接，我会很感激 – hac13

如何在我的内嵌块JavaScript div之间添加换行符？

回答

相关问题