Question

我有两个div .instructions和.personal_info，我希望将它们叠加在另一个上面。 .personal_info有顶部和底部边框。两个div似乎叠加在一起，这不是我想要的。我希望.instructions保持原状，但我希望.personal_info显示在其下方。

请让我知道我在这里失踪了什么。我的代码如下：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

最好使用CSS显示：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>

Answer 2

您需要清除浮动元素，只需在overflow: hidden上使用.instructions：

＆＃13;

.instructions {
  width: 100%;
  padding: 10px;
  overflow: hidden;
}
.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;
}

＆＃13;

<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>

＆＃13;

有关清除花车的详情，请访问here和here。

Answer 3

看看这里 Possible Solution

.instructions {
  width: 100%;
  padding: 10px;
  background-color: blue;
}
.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 {
  position: absolute;
  top:0;
  width: 100%;
  z-index: -1;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  padding: 5px;
  background-color:red;
}

目前还不清楚整体情况如何，但对于上面的例外情况，你可以做一些事情：

在说明之前定位personal_info，因此首先绘制它并将位置设置为绝对值
1. 将personal_info设置为position：absolute，top：0，z-index：-1 这将从正常的html生成流程中删除personal_info，并将其正确定位到它的兄弟姐妹.instructions 给它z-index将确保它保持在下面（如果它的zindex低于指令）

我也建议你开始使用＆＃34; display：flex＆＃34;用于定位＆＃34;列＆＃34;

Answer 4

您只需要在display: flex;课程中添加instructions。

根据W3Schools，弹性值：

将元素显示为块级Flex容器。

虽然与您的问题不完全相关，但您可以详细了解浮点数如何影响此answer.

中的块级元素

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

4 个答案: