如何将div放置在其他2个div的交点上方？

Question

如何将div定位在其他2个div的交点上方？ 我确实尝试过相对和绝对定位。但是无法取得好的结果。

我尝试在div1和div3中使用相对位置和绝对位置，然后将div3保留在div1中并增加了其高度。但是，当我将内容放置在div2中并尝试执行类似的结构后，alinment完全失真了。 谁能帮我一些更好的方法吗？ CSS网格可以实现吗？

Answer 1

使用此代码..它将为您提供帮助。...

.div1 {
  background-color: yellow;
  height: 100px;
  border: 1px solid #000;
  position: relative;
}
.div-2-half {
    background-color: #fff;
    height: 100px;
    border: 1px solid #000;
    width: 49%;
    float: left;
}
.div2 {
    width: 80%;
    margin: 0 auto;
    position: absolute;
    background: transparent;
    left: 0;
    right: 0;
    bottom: 41px;
}
.div3 {
  background-color: #fff;
    height: 100px;
    border: 1px solid #000;
}
.div4 {
    width: 100px;
    border: 1px solid #000;
    position: absolute;
    left: 23px;
}
.div-container {
  position: relative;
}

<div class="div1">
<p>div 1</p>

</div>
<div class="div-container">
  <div class="div2">
    <div class="div-2-half">
      <p>div 2</p>
      <div class="div4">div4</div>
    </div>
    <div class="div-2-half"><p>div 2</p></div>
  </div>
  <div class="div3"><p style="text-align:center; padding-top: 50px;">div 3</p></div>
</div>