我的所有div都是我的tic tac toe游戏所必需的,但是我似乎找不到更简单的方法来制作网格而没有任何边框所以它只是一个网格而不是9个正方形...我认为这是一个CSS中的问题.

    
        
        
    
    
        
Tic Tac Toe

        

        


            

                

                

                

            

            

                

                

                

            

            

                

                

                

            


        

        


        New Game
        End Game

        
        







    

这里是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;

}

Ruddy.. 29

不是100%肯定你的意思,但让我们看看.

在这里我们有一个"tic tac toe"的网格,你可以用float: left;9个盒子放入一个容器中,将这些盒子排成一排(由于width: 100px;整个容器而排成3行width: 300px;)

HTML:

CSS:

div {
    width: 300px;
    height: 600px;
}

div div {
    width: 100px;
    height: 100px;
    outline: 1px solid;
    float: left;
}

在这里演示

现在,如果我们想要像你正常玩游戏那样的边框,那么就可以这样做:

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

请注意,它在清晨可能有更好的方法来获得这种布局,大脑尚未完全正常工作.但这是一种可行的方式.

在这里演示

注意:只是刚看到我height: 600px;出于某种原因设置了,你可以降低它以适应盒子.

您的代码更简单:

HTML:

 
Tic Tac Toe


    

        

        

        

        

        

        

        

        

        

    
    

        New Game
        End Game
    

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

因此,为了让您更轻松,我将其基于您的代码并放入更简单的网格.使用我创建的类来设置创建游戏板布局的边框.

在这里演示