Question

我正在尝试使用 Javascript 创建网格。我创建了它，以便行在容器内正确对齐，但是在我需要删除的每一行下方添加了一个 4px 的空白，以便网格中没有空白。这是我的代码：

function grid(num) {
  var container = document.createElement("div");
  container.id = "main";
  container.className = "container";
  document.body.appendChild(container);
  var main = document.getElementById('main');
  for (var i = 1; i <= num; i++) {
    var row = document.createElement('div');
    row.className = "row";
    row.id = "row" + i;
    main.appendChild(row);
    var currentRow = document.getElementById('row' + i);
    for (var r = 1; r <= num; r++) {
      var box = document.createElement('div');
      box.className = 'box';
      box.style.height = ((800 - (num * 2)) / num) + 'px';
      box.style.width = ((800 - (num * 2)) / num) + 'px';
      currentRow.appendChild(box);
    }
  }
}

window.onload = grid(16);

.container {
  border: solid #000;
  height: 800px;
  width: 800px;
}

.box {
  border: 1px solid #000;
  display: inline-block;
}

Answer 1

将 vertical-align: bottom 添加到 .box 怎么样？

为什么会这样？默认 vertical-align 值为 baseline。这将每个元素的基线设置为相同的高度。 .box 元素的基线只是边框的最底部边缘。但是周围的上下文是一个文本行。文本行的基线高于文本行的底部。

function grid(num) {
  var container = document.createElement("div");
  container.id = "main";
  container.className = "container";
  document.body.appendChild(container);
  // var main = document.getElementById('main');
  for (var i = 1; i <= num; i++) {
    var row = document.createElement('div');
    row.className = "row";
    row.id = "row" + i;
    main.appendChild(row);
    //container.appendChild(row);
    //var currentRow = document.getElementById('row' + i);
    for (var r = 1; r <= num; r++) {
      var box = document.createElement('div');
      box.className = 'box';
      box.style.height = ((800 - (num * 2)) / num) + 'px';
      box.style.width = ((800 - (num * 2)) / num) + 'px';
      row.appendChild(box);
      //currentRow.appendChild(box);
    }
  }
}

window.onload = grid(16);

.container {
  border: solid #000;
  height: 800px;
  width: 800px;
}

.box {
  border: 1px solid #000;
  display: inline-block;
  vertical-align: bottom;
}

顺便说一句。我注释掉了一些你不需要的行。

Answer 2

这是一个典型的问题……inline-elements。

.box 元素设置为 .inline-block。这导致了下面的典型空白。有不同的方法可以删除它。只有两个：

最流行的是将 font-size: 0 和 line-height: 0 设置为父容器。比您必须将值重置为 .box 本身。
另一种方法是将负边距设置为 .boxes 并将 margin-bottom: -4px 设置为它们。

基于 font-size 的示例：

function grid(num) {
  var container = document.createElement("div");
  container.id = "main";
  container.className = "container";
  document.body.appendChild(container);
  var main = document.getElementById('main');
  for (var i = 1; i <= num; i++) {
    var row = document.createElement('div');
    row.className = "row";
    row.id = "row" + i;
    main.appendChild(row);
    var currentRow = document.getElementById('row' + i);
    for (var r = 1; r <= num; r++) {
      var box = document.createElement('div');
      box.className = 'box';
      box.style.height = ((800 - (num * 2)) / num) + 'px';
      box.style.width = ((800 - (num * 2)) / num) + 'px';
      currentRow.appendChild(box);
    }
  }
}

window.onload = grid(16);

.container {
  border: solid #000;
  height: 800px;
  width: 800px;
}

.box {
  border: 1px solid #000;
  display: inline-block;
  font-size: 1rem;
  line-height: calc(1rem + 2px);
}

.row {
  font-size: 0;
  line-height: 0;
}

Answer 3

.append() 之后！之前没有（也适用于内联块，因为它会占用空间）
无论如何，您最好在 display: flex; 和 .container 上使用 .row，在 flex: 1 和 .row 上使用 .box -所以你不需要计算任何东西（高度/宽度）
PS：不要创建一个元素，然后在 DOM 中搜索它，你已经在那个变量名中拥有了它！
可以通过使用一个很好的辅助函数来简化您的 JS 来创建您的元素：

const ELNew = (sel, attr) => Object.assign(document.createElement(sel), attr||{});

function grid(num) {
  const main = ELNew("div", {className:"container"});
  for (let r = 1; r <= num; r++) {
    const row = ELNew("div", {className:"row"});
    for (let c = 1; c <= num; c++) {
      const box = ELNew("div", {className:"box", onclick: ()=> console.log(`Row: ${r} Cell: ${c}`)});
      row.append(box);
    }
    main.append(row);
  }
  document.body.append(main);
}

window.onload = grid(10);

* {margin: 0; box-sizing: border-box;}

.container {
  height: 200px;
  width: 200px;
  display: flex;
  flex-flow: column nowrap;
}

.row {
  display: flex;
  flex-flow: row nowrap;
  flex: 1;
}

.box {
  border: 1px solid #000;
  flex: 1;
  cursor: pointer; 
}

Click a cell!

删除网格中行下方的空白

3 个答案: