更改 innerHTML 会意外影响 div 尺寸

Question

所以我正在编写这个基本的井字游戏，在这个过程中，我使用容器 (display:flex) 和 9 个元素制作了一个网格，其中 class 个 'cell' 个元素在其中。现在我想更新被点击的 div 的 innerHTML。但是当我这样做时， div 的大小会变大一点。我以前也在这里看到其他人问过这个问题，比如。他们都建议使用 vertical-align: top/bottom;到主容器。

我试过这样做，但就我而言，这似乎不起作用。当所有 div 都填满文本时，尺寸又恢复正常。所以这绝对是一个 问题，只有 div 是空的 。有帮助吗？

function game(e) {
  const local = document.getElementById(`${e.id}`);
  local.innerHTML = 'X';
  console.log(e.id);
}

body {
  margin: 0;
  padding: 0;
}

#container {
  width: 420px;
  height: 420px;
  display: flex;
  flex-wrap: wrap;
  background: pink;
  margin-top: 20px;
  margin-left: 20%;
  vertical-align: top;
}

.cell {
  flex: 1;
  margin: 6px;
  min-width: 30%;
  max-height: 30%;
  background: white;
}

<div id='container'>
  <div id='1' class='cell' onClick='game(this)'></div>
  <div id='2' class='cell' onClick='game(this)'></div>
  <div id='3' class='cell' onClick='game(this)'></div>
  <div id='4' class='cell' onClick='game(this)'></div>
  <div id='5' class='cell' onClick='game(this)'></div>
  <div id='6' class='cell' onClick='game(this)'></div>
  <div id='7' class='cell' onClick='game(this)'></div>
  <div id='8' class='cell' onClick='game(this)'></div>
  <div id='9' class='cell' onClick='game(this)'></div>
</div>

我还尝试向所有元素添加一个宽 space，这样它们就不再是空的了。

for(let i=1; i<10;i++)
  document.getElementById(`${i}`).innerHTML=' ';

这也无济于事，而且我并不完全喜欢使用它，即使它会起作用。寻找无缝解决方案。

注意： 我只做了 2 个月的 html 和 javascript，所以在编码 and/or 语法方面并不完全优越.任何批评都会有所帮助。

Answer 1

你的问题css。尝试...

.cell {
    /* flex: 1; */
    /* margin: 6px; */
    min-width: 32.9%;
    /* max-height: 30%; */
    background: white;
    border: 1px solid;
    height: 32.9%;
}

Answer 2

尝试将此行添加到您的 css：

* {
    box-sizing: border-box;
}

Answer 3

在这里您不需要改变单元格的大小，您希望它们始终占网格的 30%（高度和宽度）。

只需使用 width 和 height 而不是 max-width 和 min-width。

并删除 flex: 1;

function game(e) {
  const local = document.getElementById(`${e.id}`);
  local.innerHTML = 'X';
  console.log(e.id);
}

body {
  margin: 0;
  padding: 0;
}

#container {
  width: 420px;
  height: 420px;
  display: flex;
  flex-wrap: wrap;
  background: pink;
  margin-top: 20px;
  margin-left: 20%;
  vertical-align: top;
}

.cell {
  margin: 6px;
  width: 30%;
  height: 30%;
  background: white;
}

<div id="container">
  <div id="1" class="cell" onClick="game(this)"></div>
  <div id="2" class="cell" onClick="game(this)"></div>
  <div id="3" class="cell" onClick="game(this)"></div>
  <div id="4" class="cell" onClick="game(this)"></div>
  <div id="5" class="cell" onClick="game(this)"></div>
  <div id="6" class="cell" onClick="game(this)"></div>
  <div id="7" class="cell" onClick="game(this)"></div>
  <div id="8" class="cell" onClick="game(this)"></div>
  <div id="9" class="cell" onClick="game(this)"></div>
</div>

Answer 4

一个可能的解决方法是在开始时在每个   中放入一个

function game(e) {
  const local = document.getElementById(`${e.id}`);
  local.innerHTML = 'X';
  console.log(e.id);
}

body {
  margin: 0;
  padding: 0;
}

#container {
  width: 420px;
  height: 420px;
  display: flex;
  flex-wrap: wrap;
  background: pink;
  margin-top: 20px;
  margin-left: 20%;
  vertical-align: top;
}

.cell {
  flex: 1;
  margin: 6px;
  min-width: 30%;
  max-height: 30%;
  background: white;
}

<div id='container'>
  <div id='1' class='cell' onClick='game(this)'>&nbsp;</div>
  <div id='2' class='cell' onClick='game(this)'>&nbsp;</div>
  <div id='3' class='cell' onClick='game(this)'>&nbsp;</div>
  <div id='4' class='cell' onClick='game(this)'>&nbsp;</div>
  <div id='5' class='cell' onClick='game(this)'>&nbsp;</div>
  <div id='6' class='cell' onClick='game(this)'>&nbsp;</div>
  <div id='7' class='cell' onClick='game(this)'>&nbsp;</div>
  <div id='8' class='cell' onClick='game(this)'>&nbsp;</div>
  <div id='9' class='cell' onClick='game(this)'>&nbsp;</div>
</div>

由于您使用的是 "grid"，因此您也可以使用 css grid，从视觉上您可以在此处根据需要设置尺寸，但这是一个示例：

const rootElement = document.getElementById('container');
const containerChars = JSON.parse(rootElement.dataset.chars);
const cells = rootElement.getElementsByClassName('cell');

function game() {
  let c = rootElement.dataset.charLast == containerChars[0] ? containerChars[1] : containerChars[0];
  rootElement.dataset.charLast = c;
  this.innerHTML = c;
}

for (let i = 0; i < cells.length; i++) {
  cells[i].onclick = game;
}

body {
  margin: 0;
  padding: 0;
}

#container {
  border: solid 2px #dddddd;
  display: grid;
  grid-template-columns: repeat(3, minmax(2em, 1fr));
  grid-template-rows: repeat(3, minmax(2em, 1fr));
  background: #FFCCDD;
  grid-gap: 0.25rem;
}

.cell {
  background: #ddEEFF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.75em;
}

<div id='container' data-char-last="X" data-chars='["X","O"]'>
  <div id='1' class='cell'></div>
  <div id='2' class='cell'></div>
  <div id='3' class='cell'></div>
  <div id='4' class='cell'></div>
  <div id='5' class='cell'></div>
  <div id='6' class='cell'></div>
  <div id='7' class='cell'></div>
  <div id='8' class='cell'></div>
  <div id='9' class='cell'></div>
</div>

更改 innerHTML 会意外影响 div 尺寸

Altering innerHTML is unwantedly affecting div dimensions

html

javascript

css

dom

innerhtml