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 个子元素中每一个的父元素，然后设置display:block. 这样做时，您可能必须在父级上设置显式宽度。. 适用于动态内容或响应式设计..

顺便说一句，我认为添加以下内容会很酷：

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

基本上，background-color当悬停在父元素上时，这会将子元素的 设置为黑色。但是，当将鼠标悬停在孩子上时，它特别不适用..尝试将鼠标悬停在瓷砖上。

jsFiddle 示例

于 2013-11-07T04:28:04.283 回答
1

首先，确保关闭style标签。

您不需要为每一行重复您的样式（因为它与div1,div2和完全相同div3），而是将 更改ID为 aclass因为 ID 用于单个元素。

要创建行，您需要将所需的 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 回答