texto - ¿Cómo hago una cuadrícula con HTML y CSS con DIVS?
etiquetas html (3)
Tengo todos mis divs necesarios para mi juego de tic tac toe, sin embargo, no puedo encontrar una forma más sencilla de hacer una cuadrícula y no tener bordes, así que es solo una cuadrícula y no 9 cuadrados completos ... Creo que es una problema en 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>
AQUÍ ESTÁ EL CSS, TENGO 9 CAJAS QUE NECESITO UNA RED, ¿CÓMO HAGO ESO?
.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;
}
No estoy 100% seguro de lo que dices, pero echemos un vistazo.
Aquí tenemos una cuadrícula para "tic tac toe", puedes usar float: left; para poner 9 cajas en un contenedor para alinear estas cajas en una fila (3 una fila debido al width: 100px; y el width: 300px; total del contenedor 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;
}
Ahora, si queremos el borde como cuando normalmente juegas el juego, hagamos algo como esto:
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;
}
Tenga en cuenta que es temprano en la mañana y podría haber una mejor manera de conseguir ese diseño, el cerebro aún no está funcionando completamente. Pero esa es una manera que funcionará.
NOTA: Sólo acabo de ver que establezco la height: 600px; por alguna razón, puedes bajar eso para que se ajuste a la caja.
Actualizar:
Tu código con cuadrícula más fácil:
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;
}
Así que para que sea más fácil para usted, lo he basado en su código y lo he puesto en una cuadrícula más fácil. Usando clases que hice para establecer los bordes que crean el diseño del tablero de juego.
Usted crea una cuadrícula de 3 × 3 en HTML y CSS escribiendo una tabla HTML de 3 × 3 y configurando las dimensiones de sus celdas en CSS. Es absurdo no usar una tabla para una cuadrícula de tres en raya, que es una estructura tabular si alguna vez hubo una.
<style>
td { width: 1em; height: 1em; line-height: 1 }
</style>
<table>
<tr><td><td><td>
<tr><td><td><td>
<tr><td><td><td>
</table>
Normalmente, no necesita los atributos de id aquí, ya que puede referirse a las celdas por su posición estructural, tanto en CSS como en JavaScript, a menos que necesite compatibilidad con navegadores antiguos.
Los detalles dependen de los requisitos detallados. Ahora la pregunta dice "no tener bordes", pero el código CSS establece claramente los bordes.
Como @NoobEditor dijo en su comentario: muéstranos lo que has intentado hasta ahora la próxima vez.
Puedes lograr esto usando div s flotados uno al lado del otro, actuando como columnas. Dentro de esos div s agregas más div s actuando como filas.
CSS
.column{
float: left;
width: 70px;
height: 70px;
border: 1px solid blue;
overflow: hidden;
}
.row{
width: 68px;
height: 25px;
border: 1px solid red;
}
Ejemplo here .