更新

Question

我的所有div都是我的tic tac toe游戏所必需的，但是我似乎无法找到更简单的方法来制作网格而没有任何边框所以它只是一个网格而不是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;

}

Answer 1

不是100％肯定你的说法，但让我们来看看。

这里我们有一个“tic tac toe”的网格，你可以使用float: left;将9个盒子放入一个容器中以连续排列这些盒子（因为width: 100px;而排成3行）整个容器width: 300px;）

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;
}

DEMO HERE

现在，如果我们想要像你正常玩游戏那样的边界，那么就可以这样做：

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;
}

请注意，它早上很早就可能有更好的布局，大脑尚未完全正常工作。但这是一种可行的方式。

DEMO HERE

注意：只是刚刚看到我因某种原因设置了height: 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;
}

为了让您更轻松，我将它基于您的代码并放入更简单的网格。使用我制作的类来设置创建游戏板布局的边框。

DEMO HERE

Answer 2

通过编写3×3 HTML表格并在CSS中设置其单元格的尺寸，您可以在HTML和CSS中创建3×3网格。如果有一个表格，那就不用表格了，这是一个表格结构。

<style>
td { width: 1em; height: 1em; line-height: 1 }
</style>
<table>
<tr><td><td><td>
<tr><td><td><td>
<tr><td><td><td>
</table>

这里通常不需要id属性，因为除非您需要支持古老的浏览器，否则您可以在CSS和JavaScript中按结构位置引用单元格。

细节取决于详细要求。现在问题是“没有任何边界”，但CSS代码清楚地设置了边界。

Answer 3

~~就像@NoobEditor在他的评论中所说：向我们展示你下次到目前为止所尝试的内容。~~

您可以通过使用彼此相邻的div浮动来实现此目的，充当列。在这些div内，您添加了更多div作为行。

<强> CSS

.column{
   float: left;
   width: 70px;
   height: 70px;
   border: 1px solid blue;
   overflow: hidden;
}

.row{
    width: 68px;
    height: 25px;
    border: 1px solid red;
}

示例here。

如何使用DIVS制作带有Html和CSS的网格

3 个答案:

HTML：

CSS：

CSS：

更新

HTML：

CSS：