我如何保持一组包含在 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 个宽度/高度为 10 像素的 div，背景颜色为红色，所有 10 个 div 都包含在 span 中，类为 inline。然后将这个过程重复 10 次以创建 10*10 数组。

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

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

如何让所有包裹在 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 内，并使它们能够指定宽度/高度

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>

Answer 2

在canvas div 上添加display: flex。 并且不需要将内联元素设为 span，而是将其设为 div。

/*
$("#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" style="display: flex;">

</div>

Answer 3

父元素应该是display: block，内部元素可以是display: inline-block，以便它们以类似网格的方式显示。仅更改 CSS：

var createGrid = function(dimx, dimy, pixx, pixy) {
  for (var n = 1; n < dimy + 1; n++) {
    var str = "<span 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 + "</span>"

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

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

.inline {
  display: block;
  height: 10px;
}

.pixels {
  display: inline-block
}

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

</div>

但最好将spans 放在divs 中，而不是反过来（div 默认为display: 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)

.pixels {
  display: inline-block
}

#main > div {
  height: 10px
}

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

</div>