如何将一个 div 放在另一个 div 旁边，该 div 是它的父级答案

【问题标题】：How to keep a div next to another div which is its parent如何将一个 div 放在另一个 div 旁边，该 div 是它的父级
【发布时间】：2019-12-05 01:10:00
【问题描述】：

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

但是：如果我调整浏览器的大小，会发生什么情况，子 div 会随着浏览器的主体移动，并且不会留在 Avatar div (moveablecontainer) 旁边，它的父级不会除非我拖动它，否则根本无法移动。

以下是两个 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) 与 Avatar (PARENT) 保持一致。

想法？

【问题讨论】：

标签： html css typescript angular6

【解决方案1】：

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

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

【讨论】：

李，谢谢，让我现在试试。待命 - 问题：将 childrend（聊天框和框打开）作为父可移动容器的绝对对象？
我正在这个 Lee 上使用 CSS。给我一点。谢谢你的建议。
这是您可以做到的一种方式。绝对定位应该有效。然后，您可以将父级（包含头像和聊天窗口）移动到任何您喜欢的位置。