hac13 hac13 - 5 months ago 22
CSS Question

How can I add a line break between my inline-block javascript divs?

My goal is to display tiles in one large variable grid using html/javascript. I've managed to display divs with the inline-block with my code below, but I can't seem to get a line break. For example, after each 10 tiles, I would like a new line to start. This would create a 10 by 10 grid.

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();
}
}


I would appreciate a bonus tip in how to give each of these divs a unique ID for further tinkering.

Answer

After inner loop , append a break line "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
}
Comments