Question

我有这个方形的3x3网格，我想创建一个tic-tac-toe游戏，但是当我在其中一个div中放置X或O时，它会导致单元格扩展。我想找到一个解决方案，以便每个单元格保持其方形。

＆＃13;

.grid {
  display: table;
  border-spacing: 5px;
  background: black;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  width: 80px;
  height: 80px;
  max-height: 80px;
  max-width: 80px;
  background: white;
}

div {
  text-align: center;
  font-family: Arial;
  font-size: 3rem;
  font-weight: bold;
}

＆＃13;

<div class="grid">
  <div class="row">
    <div class="cell" id="1"></div>
    <div class="cell" id="2">X</div>
    <div class="cell" id="3"></div>
  </div>
  <div class="row">
    <div class="cell" id="4"></div>
    <div class="cell" id="5"></div>
    <div class="cell" id="6"></div>
  </div>
  <div class="row">
    <div class="cell" id="7"></div>
    <div class="cell" id="8"></div>
    <div class="cell" id="9"></div>
  </div>
</div>

＆＃13;

Answer 1

应该可以使用flexbox实现。

＆＃13;

.grid {
  display: table;
  background: black;
  height: 240px;
  width: 240px;
  border: 2.5px solid black;
}
.row {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.cell {
  display: flex;
  width: 80px;
  height: 80px;
  max-height: 80px;
  max-width: 80px;
  background: white; 
  border: 2.5px solid black;
  align-items: center;
  justify-content: center;
}
div {
  text-align: center;
  font-family: Arial;
  font-size: 3rem;
  font-weight: bold;
  
}

＆＃13;

<div class="grid">
  <div class="row">
    <div class="cell" id="1"></div>
    <div class="cell" id="2">X</div>
    <div class="cell" id="3"></div>
  </div>
  <div class="row">
    <div class="cell" id="4"></div>
    <div class="cell" id="5"></div>
    <div class="cell" id="6">X</div>
  </div>
  <div class="row">
    <div class="cell" id="7"></div>
    <div class="cell" id="8">O</div>
    <div class="cell" id="9"></div>
  </div>
</div>

＆＃13;

Answer 2

使用display: table的替代方法是display: grid。

您可以使用grid来设置布局，使用flexbox来设置细胞内容的中心。

要创建单元格边框，您可以将网格包装在具有背景颜色的容器中，然后使用grid-gap“显示”它。

.container {
  background: black;
  display: inline-block;
  border: 5px solid;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  grid-template-rows: repeat(3, 80px);
  grid-gap: 5px;
}

.cell {
  font-family: Arial;
  font-size: 3rem;
  font-weight: bold;
  background: white;
  /* center the cell content */
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div class="grid">
    <div class="cell" id="1"></div>
    <div class="cell" id="2">X</div>
    <div class="cell" id="3"></div>
    <div class="cell" id="4"></div>
    <div class="cell" id="5"></div>
    <div class="cell" id="6"></div>
    <div class="cell" id="7"></div>
    <div class="cell" id="8"></div>
    <div class="cell" id="9"></div>
  </div>
</div>

Answer 3

以下代码应该有效。

.grid {
  display: table;
  background: black;
  height: 240px;
  width: 240px;
  border: 2.5px solid black;
}
.row {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.cell {
  display: flex;
  width: 80px;
  height: 80px;
  max-height: 80px;
  max-width: 80px;
  background: white; 
  border: 2.5px solid black;
  align-items: center;
  justify-content: center;
}
div {
  text-align: center;
  font-family: Arial;
  font-size: 3rem;
  font-weight: bold;

}

和HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <div class="grid">
  <div class="row">
    <div class="cell" id="1"><span class="sign">X</span></div>
    <div class="cell" id="2"></div>
    <div class="cell" id="3"></div>
  </div>
  <div class="row">
    <div class="cell" id="4"></div>
    <div class="cell" id="5"></div>
    <div class="cell" id="6"></div>
  </div>
  <div class="row">
    <div class="cell" id="7"></div>
    <div class="cell" id="8"></div>
    <div class="cell" id="9"></div>
  </div>
</div>
  </body>
</html>

Answer 4

＆＃13;

table {
  border-spacing: 20px;
  background: black;
}

td {
  width: 80px;
  height: 80px;
  max-height: 80px;
  max-width: 80px;
  background: white;
  text-align: center;
  font-family: Arial;
  font-size: 3rem;
  font-weight: bold;
}

＆＃13;

<table class='grid'>
  <tr>
    <td class='cell'>X</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

＆＃13;

编辑：

我认为使用display:table，display:table-row，display:table-cell会导致问题。

如何防止方块扩大

4 个答案: