7

三目並べゲームをプログラミングしていて、ゲーム タイルを縦に積み重ねて 3x3 ボックスにするのに問題があります。

そのままでは横に9つ並んだボックスなのですが、 {clear: left;} を使うと縦に9つのボックスになってしまいます。

これまでの私のコードは次のとおりです。

<style type="text/css">
#div1 {
    width: 80px;
    height: 80px;
    padding: 10px;
    border: 1px solid #aaaaaa;
    float:left;

}
#div2 {
    width: 80px;
    height: 80px;
    padding: 10px;
    border: 1px solid #aaaaaa;
    float:left;
}
#div3 {
    width: 80px;
    height: 80px;
    padding: 10px;
    border: 1px solid #aaaaaa;
    float:left;
}
<body>
    <p>Drag the X and O images into the tic-tac-toe board:</p>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
4

4 に答える 4

8

http://jsfiddle.net/justjavac/9s8CX/

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

CSS

#div1 {
    width: 80px;
    height: 80px;
    padding: 10px;
    border: 1px solid #aaaaaa;
    float:left;
    clear: left;
}
#div2 {
    width: 80px;
    height: 80px;
    padding: 10px;
    border: 1px solid #aaaaaa;
    float:left;    // <---- HERE
}
#div3 {
    width: 80px;
    height: 80px;
    padding: 10px;
    border: 1px solid #aaaaaa;
    float:left;
}
于 2013-11-07T04:32:21.173 に答える
3

parentなどの要素を作成し、#parentそれに定義された幅を設定してみませんか? これを行うと、DOM 内の要素の位置を変更する必要がなくなります。

jsFiddle の例

#parent {
    width: 306px;
    margin: 0px auto;
}

rowまたは、 3 つの子要素のそれぞれの親として要素を作成し、set を設定することもできますdisplay:block。そうすることで、親に明示的な幅を設定する必要があるかもしれません..動的コンテンツ、またはレスポンシブデザインに適しています..

ランダムなメモで、次のようなものを追加するとクールだと思いました。

#parent:hover > div:not(:hover){
    background:black;
}

基本的に、これはbackground-color、親の上にマウスを置くと、子要素の を黒に設定します。ただし、子にカーソルを合わせると、特に適用されません。タイルにカーソルを合わせてみてください。

jsFiddle の例

于 2013-11-07T04:28:04.283 に答える
1

styleまず、タグを閉じていることを確認してください。

行ごとにスタイルを繰り返す必要はありません ( 、div1、div2およびでまったく同じであるため)。ID は単一の要素を対象としているためdiv3、代わりにIDを aに変更します。class

行を作成するには、必要な 3 つの DIV をDIV、position:relative属性を持つ別の行の中に配置する必要があります。

CSS:

.mydiv {
    wclassth: 80px;
    height: 80px;
    padding: 10px;
    border: 1px solclass #aaaaaa;
    float:left;
}

.myrow {
    position:relative;
}

HTML:

<div class="myrow">
    <div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div class="myrow">
    <div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div class="myrow">
    <div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>

http://jsfiddle.net/J2Qjb/

JSFiddle の mydiv クラスに背景色を追加して、見えるようにしたことに注意してください。

于 2013-11-07T04:41:55.263 に答える
0

display: inline-block;およびいくつかの br タグを使用した別のソリューションを次に示します。

http://jsfiddle.net/jWe9K/

于 2013-11-07T04:29:38.180 に答える