Comment faire une grille avec Html et CSS avec DIVS
j'ai toutes mes divs nécessaires pour mon jeu de Tic tac toe, cependant je ne peux pas sembler trouver un moyen plus simple de faire une grille et ne pas avoir de bordures donc c'est juste une grille et pas 9 carrés complets... Je pense que c'est un problème dans 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>
VOICI LA CSS, J'AI 9 BOÎTES J'AI BESOIN D'UNE GRILLE, COMMENT FAIRE?
.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 réponses
Je ne suis pas sûr à 100% de ce que vous dites, mais regardons.
ici nous avons une grille pour "Tic tac toe", vous pouvez utiliser float: left; mettre 9 boîtes dans un récipient à aligner ces boîtes dans une rangée (3 une ligne en raison de width: 100px; et le conteneur dans son ensemble 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;
}
maintenant, si nous voulons la frontière comme quand vous jouez normalement le jeu laisse faire quelque chose comme ceci:
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;
}
notez que son tôt le matin et il pourrait y avoir un meilleur était d'obtenir cette disposition, cerveau n'est pas encore pleinement opérationnel. Mais c'est une façon de travailler.
NOTE: juste vu j'ai mis le height: 600px; pour une raison quelconque, vous pouvez plus faible que pour s'adapter à la boîte.
mise à Jour:
votre code avec plus facile grille:
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;
}
donc pour vous faciliter la tâche, je l'ai basé sur votre code et placé dans une grille plus facile. En utilisant les classes que j'ai faites pour définir les frontières qui créent la disposition du plateau de jeu.
vous faites une grille de 3 × 3 en HTML et CSS en écrivant une table HTML de 3 × 3 et en définissant les dimensions de ses cellules dans css. Il est absurde de ne pas utiliser une table pour une grille de pied de tic tac, qui est une structure tabulaire s'il y a jamais eu un.
<style>
td { width: 1em; height: 1em; line-height: 1 }
</style>
<table>
<tr><td><td><td>
<tr><td><td><td>
<tr><td><td><td>
</table>
vous n'avez normalement pas besoin de id attributs ici, comme vous pouvez vous référer aux cellules par leur position structurelle, à la fois en CSS et JavaScript, sauf si vous avez besoin de prendre en charge d'anciens navigateurs.
les détails dépendent des détails exigence. Maintenant, la question dit "pas de frontières", mais le code CSS définit clairement les frontières.
vous pouvez y parvenir en utilisant divs flottait à côté de l'autre, agissant comme des colonnes.
À l'intérieur de ces divs vous ajoutez plus d' divs agissant comme des lignes.
CSS
.column{
float: left;
width: 70px;
height: 70px;
border: 1px solid blue;
overflow: hidden;
}
.row{
width: 68px;
height: 25px;
border: 1px solid red;
}
Exemple ici.