在具有最高值的div之后的div

Question

descBox类具有主Box的最高值，那就OK。这里我想与formBox类完全div与div类的底部descBox，但我的问题是它似乎descBox类没有占用自己的容器和我的formBox类进入它不是它的底部。什么是最好的解决方法？

.descBox {
  width: 95%;
  margin: auto;
  position: relative;
  top: 20%;
  text-align: center; 
}

<div class="mainBox">
  <div class="descBox">
    <div class="description">
      <h3>this is description</h3>
    </div>
  </div>
  <div class="formBox">
    <form>
      <input type="tel" class="formTextBox" placeholder="insert phone">
      <input type="button" class="formBtn">
    </form>
  </div>
</div>

Answer 1

我希望我能正确地得到你的问题。

你想要两个divs在descBox上显示formBox。

您可以通过添加容器并使用position: absolute放置容器来实现。

像这样：

.absContainer {
      width: 95%;
      margin: auto;
      position: absolute;
      top: 20%;
      text-align: center; 
    }

    <div class="mainBox">
      <div id="absContainer">
        <div class="descBox">
            <div class="description">
                <h3>this is description</h3>
            </div>
        </div>
        <div class="formBox">
            <form>
                <input type="tel" class="formTextBox" placeholder="insert phone"/>
                <input type="button" class="formBtn"/>
            </form>
        </div>
      </div>
    </div>

Answer 2

你有没有尝试过：

.descBox {
  width: 95%;
  margin: 20% auto 0;
  position: relative;
  top: 0;
  text-align: center;
}

Answer 3

改变你的CSS，像这样：

.mainBox{
  display:flex;
  flex-flow:column;
  justify-content:center;
  align-items:center;
}

.descBox {
  width: 95%;
  position: relative;
  top: 20%;
  text-align: center; 
}

<div class="mainBox">
  <div class="descBox">
    <div class="description">
      <h3>this is description</h3>
    </div>
  </div>
  <div class="formBox">
    <form>
      <input type="tel" class="formTextBox" placeholder="insert phone">
      <input type="button" class="formBtn">
    </form>
  </div>
</div>