html - 如何将 div 包装在绝对位置元素中

Question

代码笔:http://codepen.io/eguneys/pen/jPRexo

我有一个 position:relative 的 parent 和两个 position:absolute 并排的 child :

<div class='parent'>
  <div class='child child1'>
  </div>
  <div class='child child2'>
  </div>
</div>

.parent {
  position: relative;
  height: 200px;
  border: 1px solid black;
}

.child {
  position: absolute;
  height: 90px;
  width: 70px;
  border: 1px solid red;
}

.child1 {
  top: 0px;
  left: 0px;
}

.child2 {
  top: 0px;
  left: 70px;
}

我想把 children 分组:

<div class='parent'>
  <div class='child-group'>
    <div class='child child1'/>
    <div class='child child2'/>
  </div>
</div>

所以 child-group 包裹了两个 child 。 (child-group 边框围绕两个 child)。

这应该适用于子级绝对定位的任何位置。它们将始终并排放置，child-group 应该将它们包裹起来。

注意事项

如果这不可能，在 child 周围设置边界的可能解决方案是什么？

我可以用js设置child-group的宽度，这样我就可以计算了。

http://codepen.io/eguneys/pen/jPRexo

Answer 1

不要定位 child div，定位 child-group 包装器。

.parent {
  position: relative;
  height: 200px;
  border: 1px solid black;
}
.child-group {
  border: 2px solid green;
  position: absolute;
  top: 0;
  left: 0;
}
.child {
  float: left;
  height: 90px;
  width: 70px;
  border: 1px solid red;
}

<div class='parent'>
  <div class='child-group'>
    <div class='child child1'>
    </div>
    <div class='child child2'>
    </div>
  </div>
</div>