javascript - 如何将一组元素包裹在 div 内联中？

Question

https://jsfiddle.net//2L4t9saq/61/是我的代码 这是一行迭代的输出

<span class="inline"><div class="pixels" x="1" y="1" style="background-color: red; width: 10px; height: 10px;"></div><div class="pixels" x="2" y="1" style="background-color: red; width: 10px; height: 10px;"></div><div class="pixels" x="3" y="1" style="background-color: red; width: 10px; height: 10px;"></div><div class="pixels" x="4" y="1" style="background-color: red; width: 10px; height: 10px;"></div><div class="pixels" x="5" y="1" style="background-color: red; width: 10px; height: 10px;"></div><div class="pixels" x="6" y="1" style="background-color: red; width: 10px; height: 10px;"></div><div class="pixels" x="7" y="1" style="background-color: red; width: 10px; height: 10px;"></div><div class="pixels" x="8" y="1" style="background-color: red; width: 10px; height: 10px;"></div><div class="pixels" x="9" y="1" style="background-color: red; width: 10px; height: 10px;"></div><div class="pixels" x="10" y="1" style="background-color: red; width: 10px; height: 10px;"></div></span>

这将创建 10 个宽度/高度为 10px 且背景颜色为红色的 div，所有 10 个 div 都包装在 span 中，类为 inline。然后重复此过程 10 次以创建 10*10 数组。

这个是可以配置的，目前可以配置的只有数组的宽高，以及每个像素点的宽高

目前它只是一条垂直的 100 格红色方 block 线。

我如何让所有包裹在 classinline 中的元素保持内联？至于把它从 1*100 的直线变成 10*10 的正方形

提前致谢

/*
$("#body").append(
"<div x='1'></div>"
);
$("div[x=1]").css("background-color","red")
$("div[x=1]").css("width","16")
$("div[x=1]").css("height","16")
*/
var createGrid = function(dimx, dimy, pixx, pixy) {
  for (var n = 1; n < dimy + 1; n++) {
    var str = "<div class='inline'>"

    for (var i = 1; i < dimx + 1; i++) {
      var opentag = "<div class='pixels' x='"
      var midtag = "' y='"
      var endtag = "'></div>"
      str = str + opentag + i + midtag + n + endtag

    }
    str = str + "</div>"

    $("#main").append(str)
  }
  $(".pixels").css("background-color", "red")
  $(".pixels").css("width", pixx)
  $(".pixels").css("height", pixy)

};
createGrid(10, 10, 10, 10)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div canvas="canvas" id="main">

</div>

Answer 1

span 应该在 div 内并使它们成为内联 block 以便能够指定宽度/高度

var createGrid = function(dimx,dimy,pixx,pixy){
for(var n = 1; n <dimy+1; n++){
	var str = "<div>"

		for(var i=1;i<dimx+1;i++){
			var opentag = "<span class='pixels' x='"
  	  var midtag = "' y='"
    	var endtag = "'></span>"
   		str = str+opentag+i+midtag+n+endtag
      
		}
    str=str+"</div>"

    $("#main").append(str)
   }
$(".pixels").css("background-color","red")
$(".pixels").css("width",pixx)
$(".pixels").css("height",pixy)

};
createGrid(10,10,10,10)

#main {
  font-size:0; /* To fix white-space issue*/
}

.pixels {
  display:inline-block;
  border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div canvas="canvas" id="main">

</div>