我有我所有的divs为我的tic tac脚趾游戏，但我似乎找不到一个更简单的方法，使一个网格，没有任何边界，所以它只是一个网格，而不是9个正方形…我认为这是一个CSS中的问题
<html>
<head>
<title>First Tic Tac Toe</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tic Tac Toe</h1>
<div class="wrapper">
<div class="gameboard">
<div class="Row1">
<div id="cell1"></div>
<div id="cell2"></div>
<div id="cell3"></div>
</div>
<div class="Row2">
<div id="cell4"></div>
<div id="cell5"></div>
<div id="cell6"></div>
</div>
<div class="Row3">
<div id="cell7"></div>
<div id="cell8"></div>
<div id="cell9"></div>
</div>
</div>
<div class="button">
<button>New Game</button>
<button>End Game</button>
</div>
</div>
</body>
</html>
这里是CSS，我有9个盒子我需要一个网格，我该怎么办？
.gameboard {
width: 330px;
height:310px;
border:3px solid white;
z-index: 1;
}
.wrapper {
width: 330px;
margin:0 auto;
}
.button {
background-color:white;
width: 160px;
margin:0 auto;
}
.row1,.row2,.row3 {
clear:both;
}
#cell1,#cell2,#cell3 {
width:100px;
height:100px;
border:3px solid black;
float: left;
}
#cell4,#cell5,#cell6 {
width:100px;
height:100px;
float: left;
border:3px solid black;
}
#cell7,#cell8,#cell9 {
width:100px;
height:100px;
float: left;
border:3px solid black;
}
解决方法
不是100％肯定你的话，但让我们看看。
这里我们有一个“tic tac toe”的网格，可以使用float：left;将9个盒子放入一个容器中，将这些盒子排成一行(由于宽度为100px，整个容器宽度为300像素，一排3排)
HTML：
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS：
div {
width: 300px;
height: 600px;
}
div div {
width: 100px;
height: 100px;
outline: 1px solid;
float: left;
}
现在如果我们想要边框，就像你通常玩游戏一样，可以做这样的事情：
CSS：
div {
width: 310px;
height: 600px;
}
div div {
width: 100px;
height: 100px;
float: left;
}
div div:nth-child(-n+3) {
border-bottom: 1px solid;
}
div div:nth-child(-n+6) {
border-bottom: 1px solid;
}
div div:nth-child(1),div:nth-child(2),div:nth-child(4),div:nth-child(5),div:nth-child(7),div:nth-child(8) {
border-right: 1px solid;
}
注意，它的清晨，可能会有更好的是得到这个布局，大脑还没有完全正常工作。但这是一种工作方式。
注意：只有刚刚看到我设置的高度：600px;由于某种原因，您可以将其降低以适应盒子。
更新：
您的代码更容易网格：
HTML：
<h1>Tic Tac Toe</h1>
<div class="wrapper">
<div class="gameboard">
<div></div>
<div class="leftright"></div>
<div></div>
<div class="updown"></div>
<div class="middle"></div>
<div class="updown"></div>
<div></div>
<div class="leftright"></div>
<div></div>
</div>
<div class="button">
<button>New Game</button>
<button>End Game</button>
</div>
</div>
CSS：
.wrapper {
width: 330px;
margin:0 auto;
}
.gameboard {
width: 330px;
height:310px;
border:3px solid white;
z-index: 1;
}
.gameboard div {
width: 100px;
height: 100px;
float: left;
}
.middle {
border: 1px solid;
}
.button {
background-color:white;
width: 160px;
margin:0 auto;
}
.updown {
border-top: 1px solid;
border-bottom: 1px solid;
}
.leftright {
border-left: 1px solid;
border-right: 1px solid;
}
所以为了使您更容易，我已经将其围绕您的代码，并放在一个更简单的网格。使用我设置的边框来创建游戏板的布局。
