html - Div 被覆盖而不是堆叠在另一个之上

Question

我有两个 div，.instructions 和 .personal_info，我想将它们堆叠在另一个之上。 .personal_info 有上下边框。这两个 div 似乎相互重叠，这不是我想要的。我希望 .instructions 保留在原处，但我希望 .personal_info 显示在其下方。

请让我知道我在这里缺少什么。我的代码如下:

.instructions {
  width: 100%;
  padding: 10px;
}
.column-left {
  float: left;
  width: 33%;
  padding: 0px 10px;
}
.column-right {
  float: right;
  width: 33%;
  padding: 25px 10px 0px 10px;
}
.column-center {
  float: left;
  width: 33%;
  padding: 25px 10px 0px 10px;
}
.personal_info {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  padding: 5px;
}

<div class="instructions">
  <div class="column-left"></div>
  <div class="column-center"></div>
  <div class="column-right"></div>
</div>

<div class="personal_info">
  <p></p>
</div>

Answer 1

最好使用 CSS display:flex代码

<div style="display:flex;">
    <div style="width:33%; background-color:wheat;">Left</div>
    <div style="width:33%;">Center</div>
    <div style="width:33%; background-color:snow">Right</div>
</div>