web-dev-qa-db-fra.com

Comment créer une grille avec du HTML et du CSS avec DIVS

J'ai toutes mes divs nécessaires pour mon jeu de tic tac toe, mais je n'arrive pas à trouver un moyen plus simple de faire une grille et de ne pas avoir de frontières donc c'est juste une grille et pas 9 carrés pleins ... Je pense que c'est un problème 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>

ICI IS LE CSS, J'AI 9 BOÎTES J'AI BESOIN D'UNE GRILLE, COMMENT FAIRE CELA?

.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;

}
htmlcssbordergrid-layout
20
user3176492

Pas sûr à 100% de ce que vous dites, mais jetons un coup d'œil.

Ici, nous avons une grille pour "tic tac toe", vous pouvez utiliser float: left; pour mettre 9 boîtes dans un conteneur pour aligner ces boîtes dans une rangée (3 de suite en raison de width: 100px; et le conteneur global 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;
}

DÉMO ICI

Maintenant, si nous voulons la frontière comme lorsque vous jouez normalement, faisons 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 c'est tôt le matin et il pourrait y avoir une meilleure solution pour obtenir cette disposition, le cerveau ne fonctionnant pas encore pleinement. Mais c'est une façon qui fonctionnera.

DÉMO ICI

REMARQUE: Je viens de voir que j'ai défini le height: 600px; pour une raison quelconque, vous pouvez le réduire pour l'adapter à la boîte.

Mise à jour:

Votre code avec une grille plus simple:

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é autour de votre code et mis en place une grille plus simple. En utilisant des classes que j'ai faites pour définir les frontières qui créent la disposition du plateau de jeu.

DÉMO ICI

29
Ruddy

Comme @NoobEditor l'a dit dans son commentaire: montrez-nous ce que vous avez essayé jusqu'à présent la prochaine fois.

Vous pouvez y parvenir en utilisant divs flottant côte à côte, agissant comme des colonnes. Dans ces divs, vous ajoutez d'autres 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 .

3
Benjamin Todts