html - 子 div 在主 div 中被推下

Question

我目前正在开发联系页面。基本上，我想创建一个主容器。在主容器内包含一个将向右浮动的子容器。但是每当我尝试包含一些文本时，子容器就会被“下推”。为什么会这样，我该如何解决？

.contact-container-main {
  width: 900px;
  height: 600px;
  margin: 100px auto;
  background-color: #808080;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.contact-container-main h2 {
  width: 250px;
  margin: 15px;
  font-size: 40px;
  color: #FF0000;
}
.contact-container-main p {
  width: 600px;
  margin-left: 15px;
}
.contact-container-sub {
  width: 250px;
  height: 580px;
  margin: 10px;
  float: right;
  background-color: #000000;
}

<div class="contact-container-main">
  <h2>Contact Us</h2>
  <p>
    Lorem ipsum dolor sit amet conse ctetuer adipiscing elit. Morbi comod sed dolor sit amet consect adipiscing elit
  </p>

  <div class="contact-container-sub">

  </div>
</div>

Answer 1

您可以添加 position:absolute; 而不是在子容器上执行 float:right;顶部和右侧位置还有一个position:relative于 .contact-container-main。

.contact-container-main {
        width: 900px;
        height: 600px;
        margin: 100px auto;
        position: relative;
        background-color: #808080;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
       -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
       -moz-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   }
   .contact-container-sub {
       width: 250px;
       height: 580px;
       position: absolute;
       margin: 10px;
       background-color: #000000;
       right: 0;
       top: 0;
    }