【问题标题】：How do I make a grid with Html and CSS with DIVS如何使用 DIVS 使用 Html 和 CSS 制作网格
【发布时间】：2019-11-15 01:29:53
【问题描述】：

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

}

【问题讨论】：

向我们展示 html 和 css...
看看我的答案（第一位），这就是您可以用最少的代码制作网格的方法。
@Ruddy 你能看看我的 css 和 html，告诉我如何做你所做的，但不是通过添加 div div:nth-child，我有一个更简单的方法相信
@user3176492 你什么意思？你想要我做的第一种还是第二种方法？

标签： html css border grid-layout

【解决方案1】：

不是 100% 确定你在说什么，但让我们看看。

这里我们有一个用于“tic tac toe”的网格，您可以使用float: left; 将 9 个盒子放入一个容器中以将这些盒子排成一排（由于width: 100px; 和整个容器@ 987654326@)

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

【讨论】：

【解决方案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 代码明确设置了边框。

【讨论】：

“不使用表格进行井字游戏是荒谬的” - 真的吗？使用div 就像一张桌子一样好。表格已经过时，只应真正用于快速显示数据。为此使用表格似乎很懒惰，如果您想为网格设置样式，总体上可能会导致问题。（我的看法）
@Ruddy，div 元素没有说明元素的结构角色，而在表格中，标记对应于划分为行和列。并将标记和 CSS 的简单性与提出的 DIVistic 方法（在问题和其他答案中）进行比较。过时的表格只是一种（被误导的）意见（尽管在某些人群中很流行）。
“表过时只是一种（被误导的）观点” - 表再次过时（与它们的用途相比）。还记得表格用于布局的日子吗？那些日子早已一去不复返了，你可以用桌子做的事情非常有限。就像我之前说的，它们主要用于以快速简便的方式显示数据。如果我想显示数据，我通常会使用divs 来创建具有某些功能的漂亮布局。表格限制了您在使用后所做的一切。最后一件事，这些都只是意见，所以是的。
这绝对是更好的答案。人们太害怕表格了，因为他们不了解表格。
伙计们，这里的重点是“如何使用 DIVS 制作网格”而不是表格。使用表格（无论是好是坏）不在问题范围内

【解决方案3】：

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

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

CSS

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

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

例如here。

【讨论】：

是的，但是还有边界？？
所以去掉CSS中的border-tag。为了清楚起见，我在示例中添加了它们；）