Question

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

我的父母有position:relative，两个孩子并列position:absolute：

<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;
}

我想把孩子们放在一个小组中：

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

这样child-group包裹了两个孩子。（child-group边框大约有两个child）。

这适用于儿童绝对定位的任何地方。它们将始终并排，child-group应该包裹它们。

备注

如果无法做到这一点，那么围绕孩子的边界有什么可能的解决方案？

我可以用js设置child-group的宽度，以便我可以计算。

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

Answer 1

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如何在绝对位置元素中包含div

备注

1 个答案: