如何使用 DIVS 使用 Html 和 CSS 制作网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21014209/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make a grid with Html and CSS with DIVS
提问by user3176492
I have all my divs necessary for my tic tac toe game, however I can't seem to find a simpler way to make a grid and not have any borders so it's just a grid and not 9 full squares... I think it's an issue in CSS.
我有我的井字游戏所需的所有 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>
HERE IS THE CSS, I HAVE 9 BOXES I NEED A GRID, HOW DO I DO THAT?
这是 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;
}
回答by Ruddy
Not 100% sure what your saying but lets have a look.
不是 100% 确定你说的是什么，但让我们看看。
Here we have a grid for "tic tac toe", you can use float: left;to put 9 boxes into one container to line up these boxes in a row (3 a row due to width: 100px;and the overall container width: 300px;)
这里我们有一个用于“tic tac toe”的网格，您可以使用float: left;将 9 个盒子放入一个容器中以将这些盒子排成一排（由于width: 100px;和整个容器而连续 3 个width: 300px;）
HTML:
HTML：
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS:
CSS：
div {
width: 300px;
height: 600px;
}
div div {
width: 100px;
height: 100px;
outline: 1px solid;
float: left;
}
Now if we want the border like when you normally play the game lets do something like this:
现在，如果我们想要像平时玩游戏时那样的边框，让我们做这样的事情：
CSS:
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;
}
Note that its early in the morning and there could be a better was to get that layout, brain not be fully working yet. But that is a way that will work.
请注意，它是清晨，可能有更好的布局，但大脑尚未完全工作。但这是一种有效的方式。
NOTE:Only just seen I set the height: 600px;for some reason, you can lower that to fit the box.
注意：刚刚看到我height: 600px;出于某种原因设置了它，您可以降低它以适合盒子。
Update:
更新：
Your code with easier grid:
您的代码更容易网格：
HTML:
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:
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;
}
So to make it easier for you, I have based it around your code and put in an easier grid. Using classes I made to set the borders that create the layout of the game board.
因此，为了让您更轻松，我以您的代码为基础，并放入了一个更简单的网格。使用我创建的类来设置创建游戏板布局的边框。
回答by Jukka K. Korpela
You make a 3 × 3 grid in HTML and CSS by writing a 3 × 3 HTML table and setting the dimensions of its cells in CSS. It is absurd not to use a table for a tic tac toe grid, which is a tabular structure if there ever was one.
您可以通过编写一个 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>
You normally don't need idattributes here, as you can refer to cells by their structural position, both in CSS and JavaScript, unless you need to support ancient browsers.
您通常不需要id这里的属性，因为您可以通过它们的结构位置来引用单元格，在 CSS 和 JavaScript 中，除非您需要支持古老的浏览器。
The details depend on the detailed requirements. Now the question says “not have any borders”, yet the CSS code clearly sets borders.
详情视具体要求而定。现在问题是“没有任何边框”，但 CSS 代码明确设置了边框。
回答by Benjamin
Like @NoobEditor said in his comment: show us what you've tried so far next time.
就像@NoobEditor 在他的评论中所说的那样：下次向我们展示您到目前为止所做的尝试。
You can achieve this by using divs floated next to each other, acting as columns.
Inside those divs you add more divs acting as rows.
您可以通过使用div彼此相邻浮动的 s来实现这一点，充当列。在那些divs 中，您添加更多divs 作为行。
CSS
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.
示例在这里。
