html - 为什么将我的段落插入下一个 div 容器？

Question

嘿，我有一些段落告诉你哪个盒子是哪个数字。但是每个段落都位于它应该命名的框下方。我真的有点不知道为什么会这样。

我所说的盒子在 div 容器“case”中。它们下面应该有一个输入层。预计稍后会向其中输入数字。

body {
  background-color: dimgrey;
}
p {
  text-align: center;
  line-height: 100px;
  font-size: 40px;
  width: 100px;
  font-family: Verdana, Geneva, sans-serif;
  margin: 0 0 0 0;
}
input {
  outline: none;
  border: none;
  background-color: transparent;
  text-align: center;
  font-size: 40px;
  width: 100px;
  height: 100px;
  font-family: Verdana, Geneva, sans-serif;
  margin: 0;
}
.id {
  font-size: 20px;
  line-height: 20px;
  text-align: left;
  width: 5px;
  display: block;
}
input:focus {
  background-color: lightblue;
}
#register {
  display: inline-block;
  border: 2px solid black;
  width: 204px;
  margin: 80px;
  background-color: lightgrey;
}
#case {
  display: inline-block;
  border: 2px solid black;
  width: 408px;
  height: 408px;
  margin: 80px 0;
  overflow: hidden;
  background-color: lightgrey;
}
#instructions {
  display: block;
  border: 3px solid black;
  width: 680px;
  height: auto;
  margin: 80px 80px;
  background-color: lightgrey;
  float: right;
  overflow: hidden;
}
#instructions p {
  padding: 0px 0px 10px 10px;
}
#output {
  border: 3px solid black;
  width: 695px;
  margin: 0 0 0 80px;
  background-color: lightgrey;
  overflow: hidden;
}
#output p {
  margin: 0px 20px;
}
.box {
  float: left;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 0;
}
.info {
  text-align: left;
  line-height: inherit;
  width: inherit;
  font-size: 20px;
}
.header {
  text-decoration: underline;
}

<div id="register">
  <div class="box">
    <p>IP</p>
  </div>
  <div id="IP" class="box">
    <p></p>
  </div>

  <div class="box">
    <p>IS</p>
  </div>
  <div id="IS" class="box">
    <p></p>
  </div>

  <div class="box">
    <p>R0</p>
  </div>
  <div id="R0" class="box">
    <p></p>
  </div>

  <div class="box">
    <p>R1</p>
  </div>
  <div id="R1" class="box">
    <p></p>
  </div>
</div>
<div id="case">
  <div id="0" class="box">
    <input></input>
    <p class="id">0</p>
  </div>
  <div id="1" class="box">
    <input></input>
    <p class="id">1</p>
  </div>
  <div id="2" class="box">
    <input></input>
    <p class="id">2</p>
  </div>
  <div id="3" class="box">
    <input></input>
    <p class="id">3</p>
  </div>
  <div id="4" class="box">
    <input></input>
    <p class="id">4</p>
  </div>
  <div id="5" class="box">
    <input></input>
    <p class="id">5</p>
  </div>
  <div id="6" class="box">
    <input></input>
    <p class="id">6</p>
  </div>
  <div id="7" class="box">
    <input></input>
    <p class="id">7</p>
  </div>
  <div id="8" class="box">
    <input></input>
    <p class="id">8</p>
  </div>
  <div id="9" class="box">
    <input></input>
    <p class="id">9</p>
  </div>
  <div id="10" class="box">
    <input></input>
    <p class="id">10</p>
  </div>
  <div id="11" class="box">
    <input></input>
    <p class="id">11</p>
  </div>
  <div id="12" class="box">
    <input></input>
    <p class="id">12</p>
  </div>
  <div id="13" class="box">
    <input></input>
    <p class="id">13</p>
  </div>
  <div id="14" class="box">
    <input></input>
    <p class="id">14</p>
  </div>
  <div id="15" class="box">
    <p class="id">15</p>
    <input></input>
  </div>
</div>
<div id="instructions">
  <p class="header">Instructions:</p>
  <p class="info header">1-Byte Instructions</p>
  <p class="info">0 = Halt</p>
  <p class="info">1 = Add (R0 = R0 + R1)</p>
  <p class="info">2 = Subtract (R0 = R0 - R1)</p>
  <p class="info">3 = Increment R0 (R0 = R0 + 1)</p>
  <p class="info">4 = Increment R1 (R1 = R1 + 1)</p>
  <p class="info">5 = Decrement R0 (R0 = R0 - 1)</p>
  <p class="info">6 = Decrement R1 (R1 = R1 - 1)</p>
  <p class="info">7 = Ring Bell/Beep</p>
  <p class="info header">2-Byte Instructions, value of the second Byte is called &ltdata&gt</p>
  <p class="info">8 = Print &ltdata&gt</p>
  <p class="info">9 = Load value at address &ltdata&gt into R0</p>
  <p class="info">10 = Load value at address &ltdata&gt into R1</p>
  <p class="info">11 = Store R0 into address &ltdata&gt</p>
  <p class="info">12 = Store R1 into address &ltdata&gt</p>
  <p class="info">13 = Jump to address &ltdata&gt</p>
  <p class="info">14 = Jump to address &ltdata&gt if R0 == 0</p>
  <p class="info">15 = Jump to address &ltdata&gt if R0 != 0</p>
</div>
<div id="output">
  <p>Output:</p>
</div>

Answer 1

由于您将 .box 的 100% 空间用于 input，因此没有更多空间用于 p 标记及其溢出下一个div，你可以使用position:absolute来设置顶部的数字，

#case .box{
  position:relative;
}
#case .box .id{
  position:absolute;
  top:10px;
  padding-left:5px;
}

body {
  background-color: dimgrey;
}
p {
  text-align: center;
  line-height: 100px;
  font-size: 40px;
  width: 100px;
  font-family: Verdana, Geneva, sans-serif;
  margin: 0 0 0 0;
}
input {
  outline: none;
  border: none;
  background-color: transparent;
  text-align: center;
  font-size: 40px;
  width: 100px;
  height: 100px;
  font-family: Verdana, Geneva, sans-serif;
  margin: 0;
}
.id {
  font-size: 20px;
  line-height: 20px;
  text-align: left;
  width: 5px;
  display: block;
}
input:focus {
  background-color: lightblue;
}
#register {
  display: inline-block;
  border: 2px solid black;
  width: 204px;
  margin: 80px;
  background-color: lightgrey;
}
#case {
  display: inline-block;
  border: 2px solid black;
  width: 408px;
  height: 408px;
  margin: 80px 0;
  overflow: hidden;
  background-color: lightgrey;
}
#instructions {
  display: block;
  border: 3px solid black;
  width: 680px;
  height: auto;
  margin: 80px 80px;
  background-color: lightgrey;
  float: right;
  overflow: hidden;
}
#instructions p {
  padding: 0px 0px 10px 10px;
}
#output {
  border: 3px solid black;
  width: 695px;
  margin: 0 0 0 80px;
  background-color: lightgrey;
  overflow: hidden;
}
#output p {
  margin: 0px 20px;
}
.box {
  float: left;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 0;
}
.info {
  text-align: left;
  line-height: inherit;
  width: inherit;
  font-size: 20px;
}
.header {
  text-decoration: underline;
}
#case .box{
  position:relative;
}
#case .box .id{
  position:absolute;
  top:10px;
  padding-left:5px;
}

<div id="register">
  <div class="box">
    <p>IP</p>
  </div>
  <div id="IP" class="box">
    <p></p>
  </div>

  <div class="box">
    <p>IS</p>
  </div>
  <div id="IS" class="box">
    <p></p>
  </div>

  <div class="box">
    <p>R0</p>
  </div>
  <div id="R0" class="box">
    <p></p>
  </div>

  <div class="box">
    <p>R1</p>
  </div>
  <div id="R1" class="box">
    <p></p>
  </div>
</div>
<div id="case">
  <div id="0" class="box">
    <input></input>
    <p class="id">0</p>
  </div>
  <div id="1" class="box">
    <input></input>
    <p class="id">1</p>
  </div>
  <div id="2" class="box">
    <input></input>
    <p class="id">2</p>
  </div>
  <div id="3" class="box">
    <input></input>
    <p class="id">3</p>
  </div>
  <div id="4" class="box">
    <input></input>
    <p class="id">4</p>
  </div>
  <div id="5" class="box">
    <input></input>
    <p class="id">5</p>
  </div>
  <div id="6" class="box">
    <input></input>
    <p class="id">6</p>
  </div>
  <div id="7" class="box">
    <input></input>
    <p class="id">7</p>
  </div>
  <div id="8" class="box">
    <input></input>
    <p class="id">8</p>
  </div>
  <div id="9" class="box">
    <input></input>
    <p class="id">9</p>
  </div>
  <div id="10" class="box">
    <input></input>
    <p class="id">10</p>
  </div>
  <div id="11" class="box">
    <input></input>
    <p class="id">11</p>
  </div>
  <div id="12" class="box">
    <input></input>
    <p class="id">12</p>
  </div>
  <div id="13" class="box">
    <input></input>
    <p class="id">13</p>
  </div>
  <div id="14" class="box">
    <input></input>
    <p class="id">14</p>
  </div>
  <div id="15" class="box">
    <p class="id">15</p>
    <input></input>
  </div>
</div>
<div id="instructions">
  <p class="header">Instructions:</p>
  <p class="info header">1-Byte Instructions</p>
  <p class="info">0 = Halt</p>
  <p class="info">1 = Add (R0 = R0 + R1)</p>
  <p class="info">2 = Subtract (R0 = R0 - R1)</p>
  <p class="info">3 = Increment R0 (R0 = R0 + 1)</p>
  <p class="info">4 = Increment R1 (R1 = R1 + 1)</p>
  <p class="info">5 = Decrement R0 (R0 = R0 - 1)</p>
  <p class="info">6 = Decrement R1 (R1 = R1 - 1)</p>
  <p class="info">7 = Ring Bell/Beep</p>
  <p class="info header">2-Byte Instructions, value of the second Byte is called &ltdata&gt</p>
  <p class="info">8 = Print &ltdata&gt</p>
  <p class="info">9 = Load value at address &ltdata&gt into R0</p>
  <p class="info">10 = Load value at address &ltdata&gt into R1</p>
  <p class="info">11 = Store R0 into address &ltdata&gt</p>
  <p class="info">12 = Store R1 into address &ltdata&gt</p>
  <p class="info">13 = Jump to address &ltdata&gt</p>
  <p class="info">14 = Jump to address &ltdata&gt if R0 == 0</p>
  <p class="info">15 = Jump to address &ltdata&gt if R0 != 0</p>
</div>
<div id="output">
  <p>Output:</p>
</div>