如果我使用以下技术。孩子3被父母2吸引。
子级3实际上是<table>,而不是<div>。但是它仍然处于绝对位置。

所以基本上我想在其中有1个具有孩子的父div,然后在其下有一个有孩子的父div。



#parent1 {
  position: relative;
  border-style: solid;
  border-color: blue;
  border-size: 5px;
}
#child1 {
  position: absolute;
  border-style: solid;
  border-color: red;
  border-size: 5px;
}
#child2 {
  position: absolute;
  border-style: solid;
  border-color: yellow;
  border-size: 5px;
}
.child3 {
  position: absolute;
  border-style: solid;
  border-color: yellow;
  border-size: 5px;
}
#parent2 {
  position: relative;
  border-style: solid;
  border-color: blue;
  border-size: 5px;
}
#child4 {
  position: absolute;
  border-style: solid;
  border-color: red;
  border-size: 5px;
}
#child5 {
  position: absolute;
  border-style: solid;
  border-color: yellow;
  border-size: 5px;
}
.child6 {
  position: absolute;
  border-style: solid;
  border-color: yellow;
  border-size: 5px;
}

<div id="parent1">
  <div id="child1"></div>
  <div id="child2"></div>
  <div id="child3"></div>
</div>

<div id="parent2">
  <div id="child4"></div>
  <div id="child5"></div>
  <div id="child6"></div>
</div>

最佳答案

更新CSS:

#parent1, #parent2 {
    display: inline-block;
    width: 100%;
    clear: both;
    position: relative;
    border-style: solid;
    border-color: blue;
    border-width: 5px;
}


因为孩子们的位置是绝对的,所以准父母不要计算他们的身高。因此您需要在两个父级上都设置display:inline-block + width:100%,或者设置显式的宽度/高度。

09-10 11:47
查看更多