相对定位的内容包装不能缩放以适应内容

Question

在下面的提琴中，我的期望是元素“#wrap”将垂直缩放以适应其内容。这显然不是这样。任何人都可以提出一个简单的修改，它会导致“#wrap”自动缩放以适应其内容（即不是静态高度）。

fiddle

代码：

#wrap{ 
    display:block; 
    position:relative; 
    border:5px solid blue; 
} 

.inner{ 
     display:block; 
     position:absolute; 
     border:1px solid black; 
    left:5px; 
} 

#id1{ 
    top:0px; 
    height:50px; 
    width:50px; 
    background-color:green; 
} 

#id2{ 
    top:50px; 
    height:50px; 
    width:50px; 
    background:red; 
} 

#id3{ 
    top:100px; 
    height:50px; 
    width:50px; 
    background:yellow; 
} 

<div id="wrap"> 
    <div class="inner" id="id1">hi</div> 
    <div class="inner" id="id2"></div> 
    <div class="inner" id="id3"></div> 
</div> 

Answer 1

因为.innerdiv元素有position的absolute，所以它们被取出页面的流程。因此，任何容器元素都不再看到它们（因此不能扩展来包含它们）。

什么设置包含div元素的position到relative的作用是允许绝对定位.innerdiv元素有自己的left，right，top，并bottom性工作过其边框而不是body元素的边框。

如果你希望他们简单地放置在彼此的顶部，那么你不需要任何定位元素的特别，因为block显示元素，如div元素总是在自己的线路坐，除非float或position改变。

因此，您需要做的就是摆脱position属性，以使其正常工作。

更新CSS：

#wrap{ 
    border:solid blue 5px; 
} 

#id1{ 
    height:50px; 
    width:50px; 
    background:green; 
} 

#id2{ 
    height:50px; 
    width:50px; 
    background:red; 
} 

#id3{ 
    height:50px; 
    width:50px; 
    background:yellow; 
} 

因为div元素被显示为block元素默认情况下，我也删除display: block;。

See JSFiddle here.

如果你想实现的东西不同，那么它是不明确;不过，我很乐意在评论中提供帮助。

Answer 2

jsFidle

HTML：

<div id="wrap"> 
    <div class="inner" id="id1"></div> 
    <div class="inner" id="id2"></div> 
    <div class="inner" id="id3"></div> 
</div> 

CSS：

#wrap{ 
    display:block; 
    position:relative; 
} 

.inner{ 
     display:block; 
    position:absolute; 
} 

#id1{ 
    top:0px; 
    left:5px; 
    height:50px; 
    width:50px; 
    background:green; 
} 

#id2{ 
    top:0px; 
    left:60px; 
    height:50px; 
    width:50px; 
    background:green; 
} 

#id3{ 
    top:0px; 
    left:115px; 
    height:50px; 
    width:50px; 
    background:green; 
}