这篇博客介绍了如何利用CSS将9个元素排列成3x3的井字游戏网格。通过设置`float:left`和特定的边框样式，实现了游戏盘的布局。代码示例中，通过调整div的宽度和应用`:nth-child()`选择器，为不同位置的元素添加了底部和右侧边框，以模拟游戏盘的线条。还提供了一个简化版的CSS网格布局代码，使得实现更加简洁易懂。
不是100％肯定你的话，但让我们看看。
这里我们有一个“tic tac toe”的网格，可以使用float：left;将9个盒子放入一个容器中，将这些盒子排成一行(由于宽度为100px，整个容器宽度为300像素，一排3排)
HTML：
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：
Tic Tac Toe
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;
}
所以为了使您更容易，我已经将其围绕您的代码，并放在一个更简单的网格。使用我设置的边框来创建游戏板的布局。
扫一扫
802
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
