Question

我尝试使用div创建方格jquery的网格。问题是，即使创建了所有列及其内容，最后一列的div也不会被设置样式，导致零高度/宽度div。

JS

$(document).ready(function() {
  for (i = 0; i < 4; i++) {
    var column = $("<div class='column'></div>");
    for (j = 0; j < 4; j++) {
      var unit = $("<div class='unit'></div>");
      $('.unit').css("width", (960 / 4));
      $('.unit').css("height", (960 / 4));
      column.append(unit);
    }
    $("#container").append(column);
  }
});

CSS

#container {
  width: 100%;
  height: auto;
  text-align: center;
}

.unit {
  background-color: grey;
  margin: 1px;
}

.column {
  display: inline-block;
}

HTML

<body>
  <div id="container"></div>
</body>

Answer 1

使用您创建的已定义变量unit而不是$('.unit')

var unit = $("<div class='unit'></div>");
unit.css("width", (960 / 4));
unit.css("height", (960 / 4));
column.append(unit);

＆＃13;

$(document).ready(function() {
  for (i = 0; i < 4; i++) {
    var column = $("<div class='column'></div>");
    for (j = 0; j < 4; j++) {
      var unit = $("<div class='unit'></div>");
      unit.css("width", (960 / 4));
      unit.css("height", (960 / 4));
      column.append(unit);
    }
    $("#container").append(column);
  }
});

＆＃13;

#container {
  width: 100%;
  height: auto;
  text-align: center;
}
.unit {
  background-color: grey;
  margin: 1px;
}
.column {
  display: inline-block;
}

＆＃13;

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

＆＃13;

通过jquery创建的<div>没有被设置样式

1 个答案: