如果我使用以下技术。孩子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%
,或者设置显式的宽度/高度。