Question

我正在编写一个井字游戏并且无法将我的游戏牌垂直堆叠成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>

Answer 1

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

Answer 2

为什么不创建parent元素，例如#parent，并在其上设置定义的宽度？这样做，您不必更改DOM中元素的位置。

jsFiddle example

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

或者，您也可以创建row元素，作为3个子元素中每个元素的父元素，并设置display:block。这样做，您可能必须在父级上设置显式宽度..适用于动态内容或响应式设计..

随便说一下，我认为添加类似的东西会很酷：

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

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

jsFiddle example

Answer 3

首先，请确保关闭style代码。

您不需要为每一行重复您的样式（因为div1，div2和div3完全相同），而是更改{{1因为ID适用于单个元素，所以{}为ID。

要创建行，您需要将所需的3个DIV放在具有class属性的另一个DIV内。

CSS：

position:relative

HTML：

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

.myrow {
    position:relative;
}

http://jsfiddle.net/J2Qjb/

请注意，我在JSFiddle的mydiv类中添加了背景颜色，以便它可见。

Answer 4

以下是使用display: inline-block;和一些br标签的另一种解决方案：

http://jsfiddle.net/jWe9K/

垂直堆叠div

4 个答案: