html - 如何将一个 div 保持在另一个作为其父级的 div 旁边

Question

我有两个 div。一个在另一个里面。两者都是独立可拖动的，如果我移动 Avatar div (moveablecontainer)，子 div (box.opened) 被编程为很好地跟随它。一切都很好。

但是:如果我调整浏览器的大小，子 div 会随着浏览器的主体移动并且不会停留在 Avatar div (moveablecontainer) 旁边，它的父 div 不会除非我拖动它，否则根本不会移动。

下面是两个div各自的CSS:

父级

.moveablecontainer {
  position: absolute;
  left: 615px;
  top: 10px;
  width: 100px; 
  border: 0;
  height: 450px;
  max-height: 95px;
  background-color: transparent;
  z-index: 1000000;
}

父级内部的子 DIV:

.box {
   max-height: 0px;
 }
.box.opened {
  position: absolute;
  max-height: 400px;
  padding-top: 45px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 20px;
  margin-left: 0px;
  border-radius: 5px;
  top: 0;
  box-shadow: 0px 0px 15px black;
  -webkit-box-shadow: 0px 0px 15px black;
  background-color: #ffffff;
  overflow: hidden;
  height: auto;
  width: 325px; 
  float: right;
  left: 10px;
  z-index: 100000;
}
.box.closed {
  display: none;
  max-height: 0px;
}

这是两个 div 的 HTML(精简版):

<div class="moveablecontainer">
    <!--AVATAR GOES HERE-->  
    <div class="box opened">
    <!--CHAT WINDOW GOES HERE-->
    </div>
</div>

这是两个位置:

初始状态:

浏览器更小:

预期行为:

无论我如何调整浏览器大小/调整大小，我都希望聊天窗口(CHILD)与头像(PARENT)保持一致。

想法？

Answer 1

我认为您在这里可以做的最好的事情是创建一个包含两个 div 的父 div，然后在该 div 中对它们进行排序。如果这两个元素是在一起的，那么你真的不希望一个成为另一个的 child 。这将需要对 CSS 进行一些修改。

<div class="moveablecontainer">
    <div class="chatbox">
        <!--AVATAR GOES HERE-->  
    </div
    <div class="box opened">
        <!--CHAT WINDOW GOES HERE-->
    </div>
</div>