Question

https://jsfiddle.net/The95Chaps/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个div，宽度/高度为10px，背景色为红色，所有10个div都包装在span类inline中。然后重复此过程10次以创建10 * 10数组。

可以配置，目前可以配置的只是数组的宽度和高度，以及每个像素的宽度和高度

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

我如何使包裹在课程inline中的所有元素保持内联？将它从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

父元素应为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>

但是最好将span放在div内，而不是相反（默认情况下，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>

Answer 3

在display: flex格上添加canvas。无需将内联元素设置为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>

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

3 个答案: