web-dev-qa-db-ja.com

Htmlでグリッドを作成し、DIVSでCSSを作成する方法

私はチックタックトーゲームに必要なすべてのdivを持っていますが、グリッドを作成する簡単な方法を見つけることはできず、境界線がないので、グリッドであり、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 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>

こちらIS THE 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;

}
htmlcssbordergrid-layout
20
user3176492

あなたの言っていることを100％は確信していませんが、見てみましょう。

ここには、「tic tac toe」のグリッドがあります。float: left; 9つのボックスを1つのコンテナに入れて、これらのボックスを一列に並べます（3はwidth: 100px;およびコンテナ全体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;
}

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

注：見ただけでheight: 600px;何らかの理由で、ボックスに収まるようにそれを下げることができます。

更新：

より簡単なグリッドを使用したコード：

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

使いやすくするために、コードに基づいて簡単なグリッドに配置しました。ゲームボードのレイアウトを作成する境界線を設定するために作成したクラスを使用します。

DEMO HERE

29
Ruddy

HTMLとCSSで3×3のグリッドを作成するには、3×3のHTMLテーブルを作成し、そのセルのサイズをCSSで設定します。三目並べグリッドにテーブルを使用しないのはばかげています。

<style>
td { width: 1em; height: 1em; line-height: 1 }
</style>
<table>
<tr><td><td><td>
<tr><td><td><td>
<tr><td><td><td>
</table>

昔のブラウザをサポートする必要がない限り、CSSとJavaScriptの両方で構造上の位置によってセルを参照できるため、通常はここでid属性を必要としません。

詳細は、詳細な要件によって異なります。現在、質問には「境界線はありません」とありますが、CSSコードは境界線を明確に設定します。

8
Jukka K. Korpela

@NoobEditorが彼のコメントで言ったように：次回までにこれまでに試したことを見せてください。

これは、列として機能するdivsを互いに隣り合わせて使用​​することで実現できます。それらのdivsの中に、行として機能するdivsをさらに追加します。

[〜＃〜] css [〜＃〜]

.column{
   float: left;
   width: 70px;
   height: 70px;
   border: 1px solid blue;
   overflow: hidden;
}

.row{
    width: 68px;
    height: 25px;
    border: 1px solid red;
}

例 ここ 。

3
Benjamin Todts