Question

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

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进行进一步的修补。

Answer 1

在内循环之后，添加一个断行＆＃34; br＆＃34;

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
}

Answer 2

一种方法是将所有div包装在一个容器中，该容器的宽度是每个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);
  }
}

Answer 3

＆＃13;

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

＆＃13;

document.body.appendChild(document.createElement("br"));使用此行在第一个循环中添加中断。

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

3 个答案: