如何使用Html和CSS与DIVS进行网格化_html-js-css

概述我有我所有的divs为我的tic tac脚趾游戏，但我似乎找不到一个更简单的方法，使一个网格，没有任何边界，所以它只是一个网格，而不是9个正方形…我认为这是一个CSS中的问题 <html> <head> <title>First Tic Tac Toe</title> <link rel="stylesheet" type="text/css" href=" 我有我所有的divs为我的tic tac脚趾游戏，但我似乎找不到一个更简单的方法，使一个网格，没有任何边界，所以它只是一个网格，而不是9个正方形…我认为这是一个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 >        <div >            <div >                <div ID="cell1"></div>                <div ID="cell2"></div>                <div ID="cell3"></div>            </div>            <div >                <div ID="cell4"></div>                <div ID="cell5"></div>                <div ID="cell6"></div>            </div>            <div >                <div ID="cell7"></div>                <div ID="cell8"></div>                <div ID="cell9"></div>            </div>        </div>        <div >        <button>New Game</button>        <button>End Game</button>        </div>        </div>    </body></HTML>

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

解决方法@H_419_10@ 不是100％肯定你的话，但让我们看看。

这里我们有一个“tic tac toe”的网格，可以使用float：left;将9个盒子放入一个容器中，将这些盒子排成一行(由于宽度为100px，整个容器宽度为300像素，一排3排)

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

DEMO HERE

现在如果我们想要边框，就像你通常玩游戏一样，可以做这样的事情：

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

注意，它的清晨，可能会有更好的是得到这个布局，大脑还没有完全正常工作。但这是一种工作方式。

DEMO HERE

注意：只有刚刚看到我设置的高度：600px;由于某种原因，您可以将其降低以适应盒子。

更新：

您的代码更容易网格：

HTML：

<h1>Tic Tac Toe</h1><div >    <div >        <div></div>        <div ></div>        <div></div>        <div ></div>        <div ></div>        <div ></div>        <div></div>        <div ></div>        <div></div>    </div>    <div >        <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;}

所以为了使您更容易，我已经将其围绕您的代码，并放在一个更简单的网格。使用我设置的边框来创建游戏板的布局。

DEMO HERE

总结

以上是内存溢出为你收集整理的如何使用Html和CSS与DIVS进行网格化全部内容，希望文章能够帮你解决如何使用Html和CSS与DIVS进行网格化所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1110357.html