html - 如何让两个 div 彼此相邻但间隔开？

我正在为一项学校作业制作游戏(主脑)，但我无法让 divs 做我想做的事。我有一个板 div，里面有多个其他 div(每行 5 个)。我现在正计划在它旁边制作第二个 div 以让它显示分数。但是我似乎无法在“board”div 旁边获得“scoresheet”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 中前四个方 block 的 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;
}

我正在考虑将“scoresheet”div 贴在页面的右侧，靠着滚动条。我也不知道使用表格显示白色和黑色引脚的数量是否是最好的做法，如果您知道更有效或更智能的编码，请告诉我。我一点也不熟悉更复杂的编码片段，所以如果你能解释每段代码的步骤和功能，我将非常非常感激。预先感谢您提供的所有帮助。

我现在已经设法获得另一个将显示高分和其他有用信息的 div，这是我遇到的困难:获得一个显示信息的 div 以放置在“板”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 的下方。 board div 内的表格用于显示白色和黑色引脚的数量(四个色域，表格内的四个正方形)。如果您运行当前代码，您会看到应该在表格之前的“板”div 中显示的四个 div 没有正确显示，并且只是在板内创建了一个大的黑色边框。”我不知道我应该如何解决这个问题。当我只有一行“四个 colordivs-一张表”时，四个 div 确实正确显示了当然会有轮流的历史，所以我需要多行的四个 colordivs通过显示引脚的表格。因为它只适用于有表格的一行，我猜表格是故障排除程序。我将 div ID 和类名从荷兰语翻译成英语，所以很清楚什么是什么。再次感谢大家的帮助。

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

最佳答案

我认为使用表格来存放你的分数是个好主意。

您可以使用 position: absolute 根据另一个元素定位您的表格。此元素是它的包含 block ，您可以通过向其添加position: relative 来表明它是您的棋盘游戏。如果这样做，您可以将 left: 100% 添加到您的计分表中，使其贴在您的棋盘右侧。

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

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

关于html - 如何让两个 div 彼此相邻但间隔开？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36071632/

html - 如何让两个 div 彼此相邻但间隔开？

上一篇：javascript - 在每秒 td 中选择 span，它周围没有 anchor

下一篇：php - 如何在wordpress站点中为一页加载样式