如何使用DIVS创建带有HTML和CSS的网格 [英] How do I make a grid with Html and CSS with DIVS
问题描述
我有我的所有div需要我的tic tac toe游戏，但我似乎找不到一个更简单的方法来做一个网格，没有任何边框，所以它只是一个网格，而不是9全方形...我认为这是CSS的一个问题。
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.
<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个盒子我需要一个网格，我怎么办？ / p>
HERE IS THE CSS, I HAVE 9 BOXES I NEED A GRID, HOW DO I DO THAT?
.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;
}
推荐答案
不是100
这里我们有一个tic tac toe的网格，你可以使用 float：left ; 将9个盒子放在一个容器中，以便在一行中排列这些盒子（3行，由于 width：100px; width：300px; ）
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;)
<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:
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.
注意：只是看到我由于某种原因设置了 height：600px;
NOTE: Only just seen I set the height: 600px; for some reason, you can lower that to fit the box.
您的代码与网格更简单：
Your code with easier grid:
<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.
这篇关于如何使用DIVS创建带有HTML和CSS的网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
