0

我找到了这个答案，但它没有解决我的问题：空 div 不好吗？

我有一个井字游戏插图，大致如下：

    <div class="tic-tac-toe">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

和 CSS，相关位：

.tic-tac-toe {
    display: block;
    width: 109pt;
    height: 109pt;
    text-align: center;
    margin: auto;
}
.tic-tac-toe div {
    width: 32pt;
    height: 26pt;
    font-family: monospace;
    font-weight: bold;
    padding-top: 6pt;
    background-color: #555;
    float: left;
    margin: 0;
    -moz-box-shadow: 3px 3px 4px #909090;
    -webkit-box-shadow: 3px 3px 4px #909090;
    box-shadow: 3px 3px 4px #909090;
}
.tic-tac-toe div:nth-child(1),
.tic-tac-toe div:nth-child(4),
.tic-tac-toe div:nth-child(7) {
    margin-right: 6pt;
}
. . . /* for other sides */

这里有一些 CSS 和一些 JavaScript 在起作用。有什么可以代替 div 的吗？我真的只需要一个方块，我可以画背景并在里面放一个字母“X”或“O”。我是什么做的？

4

3 回答 3

1

本身不一定很糟糕，但有些浏览器处理它的方式不同。例如，旧的 IE 和 Firefox 过去常常隐藏空的 div。我记得有很多&nbsp;s 徘徊以保持临时 div 仍然可见，直到其内容被其他内容替换。

于 2013-05-12T15:42:47.343 回答
0

您可以通过使用用 x 和 o 标记 div 的类来轻松实现这一点。

这是一个如何做到这一点的示例：

.tic-tac-toe > div.x:before {
    content: 'X';
}
.tic-tac-toe > div.o:before {
    content: 'O';
}

我使用上面的类在点击时用 x 和 o 随机标记 div 用一点 javascript 做了这个简短的小提琴。

看看这个小提琴：http: //jsfiddle.net/En3DV/

于 2013-05-12T15:51:22.357 回答
0

&nbsp;使用表格并为每个单元格填充它。（您可能想要标记单元格。）            

于 2013-05-12T15:51:33.607 回答