logo标签列表

如何使用HTML和CSS创建一个包含DIV元素的网格？

htmlcssbordergrid-layout
21

我已经创建好井字游戏所需的所有

，但是我无法找到更简单的方法来创建一个没有边框的网格，使其只是一个网格而不是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;

}
3
请展示 HTML 和 CSS 的代码。 - NoobEditor
看看我的答案（第一部分），这就是你可以用最少的代码制作网格的方法。 - Ruddy
@Ruddy，你能否看一下我现有的CSS和HTML，并告诉我如何实现你所做的事情，但不是通过添加div div:nth-child的方式，我相信有更简单的方法。 - user3176492
@user3176492 你是什么意思？你想要我用第一种方法还是第二种方法来做？ - Ruddy
3个回答
33

我不完全确定你的意思，但我们来看一下。

这里有一个“井字游戏”的网格，你可以使用float: left;将9个方框放入一个容器中，以便将这些方框排成一排（由于width：100px;和整个容器width：300px;，每行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;
}

请注意，现在还是早上，可能有更好的方法来获取布局，我的大脑可能还没有完全工作。但这是一种可行的方法。

点此查看演示

注意：我刚刚才发现我设置了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
8

通过编写一个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代码明显设置了边框。

3
不使用表格来制作井字棋盘格是荒谬的吗？- 真的吗？使用 div 同样可以很好地实现。表格已经过时了，只有在快速显示数据时才应该真正使用它们。对于这个问题，使用表格似乎只是懒惰，而且可能会导致样式方面的问题。（我的观点） - Ruddy
7
@Ruddy，一个div元素并未表明元素的结构角色，而在表格中，标记对应着行和列的划分。与提出的DIV主义方法（在问题和其他答案中）相比，标记和CSS的简洁性也要优于它们。认为表格已经过时只是一种（误导性的）观点（尽管在某些人群中是流行的模因）。 - Jukka K. Korpela
"表格过时只是一种（误导性的）观点" - 再次强调，相比于它们曾经用于的用途，表格已经过时了。还记得以前用表格进行布局的日子吗？那些日子早已过去了，而且使用表格所能做的事情非常有限。就像我之前说的，它们主要用于快速简便地显示数据。如果我想要显示数据，通常会使用 div 来创建一个漂亮的布局并添加一些功能。表格在使用后会对你所做的一切都设置限制。最后，这两者只是观点问题，所以随意选择。 - Ruddy
2
这绝对是更好的答案。人们过于害怕表格，因为他们不理解它们。 - Loktar
各位，这里的主要问题是“如何使用DIVS制作网格”，而不是使用表格。无论表格是否更好或更差，都超出了问题的范围。 - LeonardoX
3

像@NoobEditor在评论中说的一样：下次展示一下你已经尝试过的。

您可以通过使用相互浮动的div作为列来实现这一点。 在这些

内，您添加更多充当行的
。

CSS

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

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

Example here.

是的，但仍然存在边界吗？ - user3176492
2
因此，请在CSS中删除边框标签。 我在示例中添加它们以清晰明了为目的。 - Benjamin
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接