Question

我正在尝试使用javascript中的for循环创建5行div标签的模式。第一行应该有1个div，第二行应该有2个div，依此类推，直到最后一行有5个div。我目前最终得到的是1行15个div。

<script>

    for (var i = 0; i < 5; i++) {
        for(var j = 0; j <= i; j++) {
            var div = document.createElement("div");
            document.body.appendChild(div);
        }
        var p = document.createElement("p");
        document.body.appendChild(p);
    }

</script>

CSS

<style>
    div {
        width: 20px;
        height: 20px;
        border: 1px solid black;

        display: inline-block;
        position: relative;
        float: left;
    }
</style>

Answer 1

您可以简单地考虑br标记来创建分隔，而不需要使用float，因为您必须在每行之后清除它：

＆＃13;

for (var i = 0; i < 5; i++) {
  for (var j = 0; j <= i; j++) {
    var div = document.createElement("div");
    div.classList.add('box');
    document.body.appendChild(div);
  }
  var br = document.createElement("br");
  document.body.appendChild(br);
}

＆＃13;

div.box {
  width: 20px;
  height: 20px;
  border: 1px solid black;
  display: inline-block;
}

＆＃13;

使用float你需要这样的东西：

＆＃13;

for (var i = 0; i < 5; i++) {
  for (var j = 0; j <= i; j++) {
    var div = document.createElement("div");
    div.classList.add('box');
    document.body.appendChild(div);
  }
  var br = document.createElement("br");
  document.body.appendChild(br);
}

＆＃13;

div.box {
  width: 20px;
  height: 20px;
  border: 1px solid black;
  float:left;
}
br {
 clear:both; /*This is mandatory !!*/
}

＆＃13;

或者像这样：

＆＃13;

for (var i = 0; i < 5; i++) {
  var p = document.createElement("div"); /*Create the row*/
  p.classList.add('clear'); /*add the clear class*/
  for (var j = 0; j <= i; j++) {
    var div = document.createElement("div");
    div.classList.add('box');
    p.appendChild(div); /*Append blocks to the row and not the body*/
  }
  document.body.appendChild(p); /*Append the row to the body */
}

＆＃13;

div.box {
  width: 20px;
  height: 20px;
  border: 1px solid black;
  float:left;
}
div.clear {
 clear:both; /*This is mandatory !!*/
}

＆＃13;

如何多行div方格图案

1 个答案: