Question

我正在为一个学校作业（策划者）制作一个游戏，但是我很难让div去做我想做的事。我有一个板子div，里面有多个其他div（每行5个）。我现在正计划在它旁边制作第二个div以显示分数。但是我似乎无法获得“board”div旁边的“scoreheet”div。我刚接受编程，所以我的代码可能非常原始或无效。这就是我到目前为止所做的：

<div id="board">
        <div id="turn0">
        <div id="space0.0" class="spacex"></div>
        <div id="space0.1" class="spacex"></div>
        <div id="space0.2" class="spacex"></div>
        <div id="space0.3" class="spacex"></div>
        <div id="table0">
        <table>

            <tr>
            <td> </td>
            <td> </td>
            </tr>
            <tr>
            <td> </td>
            <td> </td>
            </tr>
        </table>
        </div>
        </div>

这是电路板的一行，此代码与电路板的每一行一起复制。该表用于根据您正确猜测的颜色数量显示白色或黑色引脚，前四个div是前一个显示，用于显示您为上一个回合选择的颜色。 “board”div用于显示先前的转弯。这是我在“board”div上的CSS代码：

#board{
    width: 335px;
    height: 600px;
    margin: auto;
    background-color: darkgrey;
    left: 50%;
    overflow: hidden;
}

这是“board”div中前四个方块的CSS：

  .spacex {
        float: left;
        width: 50px;
        height: 50px;
        margin: 6px;
        vertical-align: center;
}

最后是小桌子的CSS：

table, td {
    border: 1px solid black;
    height: 22px;
    width: 50px;
    margin; 4px;
}

我正在考虑将“scoreheet”div粘贴到页面的右侧，与滚动条对齐。我也不知道使用表格来显示白色和黑色针脚的数量是最好的行动方案，如果您知道更有效或更智能的编码，请告诉我。我完全不熟悉更复杂的编码，所以如果你能解释每一段代码的步骤和功能，那将非常感激。提前感谢所有的帮助。

我现在设法得到另一个div，它将显示高分和其他有用的信息，这是我所遇到的一个问题：得到一个div，显示信息放在“board”div的右边。结果比我想象的更简单，我只需要给div一个顶级和正确的值和位置。虽然你们都得到了很大的帮助，但我仍然还有两个关于div的放置的问题。现在我有一个按钮，用于检查猜测的颜色是否与计算机生成的颜色代码匹配，但是我无法更改按钮的位置。我也有一个问题，“板”div内的div没有正确显示。代码背后的整个概念很难解释，所以我将复制我到目前为止的代码： HTML：

<!DOCTYPE html> 
<html>
    <head>
        <title> Master Mind </title>
        <meta charset="UTF-8">
        <script src="script.js"></script>
        <link rel="stylesheet" href="style.css">    
    </head>
    <body>
    <p>
    <h1> Master Mind </h1>
    </p>

    <div id="turn-interactive">
        <div id="choosecolor0" class="colorfield"></div>
        <div id="choosecolor1" class="colorfield"></div>
        <div id="choosecolor2" class="colorfield"></div>
        <div id="choosecolor3" class="colorfield"></div>
        <form> <input type="button" value="Check!"name="button" class="button"></form>
    </div>
    <div id="board">
        <div id="turn0">
        <div id="space0-0" class="spacex"></div>
        <div id="space0-1" class="spacex"></div>
        <div id="space0-2" class="spacex"></div>
        <div id="space0-3" class="spacex"></div>
        <div id="table0">

        <table>

            <tr>
            <td> </td>
            <td> </td>
            </tr>
            <tr>
            <td> </td>
            <td> </td>
            </tr>
        </table>
        </div>
        </div>
    <div id="board">
        <div id="beurt0">
        <div id="space0_0" class="spacex"></div>
        <div id="space0_1" class="spacex"></div>
        <div id="space0_2" class="spacex"></div>
        <div id="space0_3" class="spacex"></div>
        <div id="table0">

        <table>

            <tr>
            <td> </td>
            <td> </td>
            </tr>
            <tr>
            <td> </td>
            <td> </td>
            </tr>
        </table>
        </div>
        </div>

    </div>  
    <aside><div id="infobar" class="infobar"></div></aside>

CSS：

body {
    overflow: auto;
    background-color: lightgrey;
    height: 99%;
    width: 99%;
}

div {
    border: 2px solid black;
}
.infobar{
    height: 600px;
    width: 200px;
    right: 50%;
    overflow: hidden;
    position: absolute;
    top: 40%;
    right: 0%;
    background-color: white;
}
.button{
 display: block;
 height: 100px;
 width: 300px;
 background: #34696f;
 border: 2px solid rgba(33, 68, 72, 0.59);
 position: static;
 top: 50%;
 left: 75%;
}
}

.spacex {
    float: left;
    width: 50px;
    height: 50px;
    margin: 6px;
}

.colorfield {
    float: left;
    width: 120px;
    height:120px;
    background-color: white;
    margin: 10px;
    left: 50%;
}

#board{
    width: 350px;
    height: 600px;
    margin: auto;
    background-color: darkgrey;
    left: 50%;
    overflow: hidden;
}

#turn-interactive{
    width: 1000px;
    height: 150px;
    background-color: red;
    margin: auto;
    margin-bottom: 10px;
    top: 15%;

}

table, td {
    border: 1px solid black;
    height: 22px;
    width: 50px;
    margin; 4px;

}

这个想法是为了稍后（当我开始编写javascript时）将四个色域的值复制到“Board”div下面。板div内的表用于显示白色和黑色引脚的数量（四个色域，表内四个方块）。如果您运行当前代码，您可以看到应该在表格之前显示在“board”div内的四个div显示不正确，并且只是在棋盘内创建一个大的黑色边框。“我不知道我应该如何解决这个问题。当我只有一排“四个colordivs-one table”时，这四个div确实正确显示出来，这将是一个转弯的历史所以我需要多排四个colordivs跟随通过一个显示别针的表格。因为它确实只有一行有一个表我猜测该表是故障排除者。我将div ID和类名从荷兰语翻译成英语，所以很明显是什么。再次感谢大家的帮助。

PS。由于该网站以后还需要一个javascript代码，我以为我应该添加标签。很抱歉，因为我的问题确实与javascript无关。

Answer 1

我为您的示例制作了一个CodePen：http://codepen.io/angeliquejw/pen/MyJGaz?editors=1100

正如@GCyrillus指出的那样，您将要使用连字符/破折号或下划线交换ID中的点/句点。我在这里使用破折号，但做你想做的事。

从您的问题中不清楚您是否希望得分表出现在主板内（这是它的编码方式）或右上角，无论主板如何。我在您的示例中添加了以下CSS：

#table0 {
    position:absolute;
    top:0;
    right:0;
}

如果您希望桌子位于主板内，则只需将position:relative添加到#board即可。我已经添加了，但已将其评论出来。我还注释了left:50%，它在当前代码中根本没有做任何事情，如果/当你改变#board的位置时，就会把事情搞砸。

Answer 2

我认为使用桌子来举办你的分数是一个神明的想法。

您可以使用position: absolute根据其他元素定位表格。此元素是 Containing Block ，您可以通过向其添加position: relative来表明它是您的棋盘游戏。如果您这样做，可以在评分表中添加left: 100%，使其贴在电路板的右侧。

＆＃13;

#board {
  position: relative;
  width: 335px;
  height: 600px;
  margin: auto;
  background-color: darkgrey;
}
#scoresheet {
  position: absolute;
  left: 100%;
  width: 52px;
  border-collapse: collapse;
}
#scoresheet td {
  border: 1px solid black;
  width: 22px;
  height: 22px;
}

＆＃13;

<div id="board">
  <table id="scoresheet">
    <tr>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

＆＃13;

Answer 3

您不能将得分表格放在游戏板div旁边的原因是因为表格标签嵌套在游戏板div内。因此，游戏板div包围桌子。以下是解决此问题的方法：＆＃34;但是我似乎无法获得＆＃34;得分表＆＃34; div＆＃34; board＆＃34;旁边的div DIV＆＃34;

改变这个：

<div id="board">
   ...
   <table>
   ...
   </table>
</div>

对此：jsfiddle

<div id="board">
    ...
</div>
<table id="scoresheet">
    ...
</table>

要使它们并排显示，请将左浮动应用于它们：

#board, 
#scoresheet {
   float: left;
}

你可以使用相同的float：left trick将spacex div标签水平对齐成一行方块。这将解决这个问题：＆＃34;我有一个板div，里面有多个其他div（每行5个）。＆＃34;要创建多个行，请将它们包装在行div中，而行div不会应用浮点数。

<div id="row1" class="rows">
    <div id="space0.0" class="spacex"></div>
    <div id="space0.1" class="spacex"></div>
    <div id="space0.2" class="spacex"></div>
    <div id="space0.3" class="spacex"></div>
    <div id="space0.4" class="spacex"></div>
</div>
<div id="row2" class="rows">
    <div id="space1.0" class="spacex"></div>
    <div id="space1.1" class="spacex"></div>
    <div id="space1.2" class="spacex"></div>
    <div id="space1.3" class="spacex"></div>
    <div id="space1.4" class="spacex"></div>
</div>

.spacex {
   float: left;
}

尝试给.spacex一个边框，背景颜色＆amp;设置边距/填充样式！祝好运！：）

如何在彼此旁边获得两个div，但间隔为？

3 个答案: