Question

因此，我正在编写此基本的tictactoe游戏，在此过程中，我使用了一个容器（display：flex）和9个元素为“ cell”的类来制作网格。现在，我想更新被单击的div的innerHTML。但是，当我这样做时，div的大小会变大。我也看到其他人也曾在这里问过这个问题，例如Div element moves when changing the innerHTML。他们都建议使用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>

我还尝试为所有元素添加一个较大的空间，以便它们不再为空。

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

那也无济于事，而且即使它可行，我也不完全喜欢使用它。寻找无缝的解决方案。

注意：：我只使用html和javascript已有2个月了，因此在编码和/或语法方面并不完全优越。任何批评都会有所帮助。

Answer 1

这里您不需要更改单元格的大小，而是希望它们始终是网格的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 2

一种可能的解决方法是在开始时各插入一个 

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>

由于您使用的是“网格”，因此也可以使用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>

Answer 3

您的问题CSS。试试...

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

Answer 4

尝试将此行添加到CSS：

* {
    box-sizing: border-box;
}

更改innerHTML会不必要地影响div尺寸

4 个答案: